Question

晚安！我有标签。

$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
	$(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

.wrapper .active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>        
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>

但他们用“fadeIn”显示并隐藏“fadeOut”。我想让他们从右边显示（在animate.css它的类“fadeInRightBig”中）并隐藏在左边（在animate.css它的类“fadeOunLeftBig”）。谢谢你的帮助！

Answer 1

这就是你要追求的吗？

http://codepen.io/Himechi90/pen/LpjReE

<div class="tab_content">
    <div class="tab_item animated fadeOutLeftBig">Содержимое 1</div>
    <div class="tab_item animated fadeOutLeftBig">Содержимое 2</div>
    <div class="tab_item animated fadeOutLeftBig">Содержимое 3</div>
</div>

$(".tab_item").addClass("fadeOutLeftBig").hide("fast").eq($(this).index()).switchClass("fadeOutLeftBig", "fadeInRightBig").fadeIn("fast")
}).eq(0).addClass("active");

从右到左显示/隐藏选项卡

1 个答案: