如何讓這個jQuery比我的更快？

Question

目前，我正在使用此腳本作為一種“選項卡”系統。 單擊一個選項卡時，它會隱藏所有其他選項卡。 他們都是div。 但是現在，我認為在選定的div加載之前它的消失速度不夠快。 它最終會被選中並正在顯示的div下方移動。

我不想要切換，因為正如你所看到的，我有5個標簽，我想在點擊它們時打開它們各自的“_s”div。 淡出，淡入。

任何使淡出效果在淡入之前發生的方法，或者可能會延遲添加？ 我不知道如何在此腳本中添加延遲，或檢查以確保div在新div淡入之前完全淡化。

我很感激任何幫助。 謝謝！

<script>
$("#teach_one").click(function() {
    $("#teach_one_s").fadeIn("slow");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_two").click(function () {
    $("#teach_two_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_three").click(function () {
    $("#teach_three_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_four").click(function () {
    $("#teach_four_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_five").click(function () {
    $("#teach_five_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
});
</script>

這是我的HTML請求：

<ul class="noselect teach_home_navigator_tabs">

<li id="teach_one">

</li>
<li id="teach_two">

</li>
<li id="teach_three">

</li>
<li id="teach_four">

</li>
<li id="teach_five">

</li>

</ul>


<div class="infotab teach_round" id="teach_one_s">  
stufff
</div>

<div class="infotab teach_round" id="teach_two_s">  
stufff
</div>

<div class="infotab teach_round" id="teach_three_s">    
stufff
</div>

<div class="infotab teach_round" id="teach_four_s"> 
stufff
</div>

<div class="infotab teach_round" id="teach_five_s"> 
stufff
</div>

Answer 1

沒有看到你的標記我不能確定，但​​是，只是為了簡化你的jQuery，並減少你的重復，你可以嘗試使用這樣的東西：

$('div[id^="teach_"]').click(
    function(){
        var showThis = this.id + '_s';
        $('#' + showThis).fadeOut('slow',
            function(){
                $('div[id$="_s"]').not($(this)).fadeIn('fast');
            });
    });

---

編輯以回應@Josh提供的html。

$('.each_home_navigator_tabs li').click(
    function(){
        var showThis = this.id + '_s';
        $('.infotab:visible').fadeOut('slow',
            function(){
                $('#' + showThis).fadeIn('fast');
            });
    });

參考文獻：

• attribute-starts-with selector： ^= 。
• attribute-ends-with selector： $= 。
• not() 。

Answer 2

根據您的HTML更新

<ul class="noselect teach_home_navigator_tabs">
    <li id="teach_one">one</li>
    <li id="teach_two">two</li>
    <li id="teach_three">three</li>
    <li id="teach_four">four</li>
    <li id="teach_five">five</li>
</ul>

<div class="infotab teach_round" id="teach_one_s">stufff</div>
<div class="infotab teach_round" id="teach_two_s">stufff</div>
<div class="infotab teach_round" id="teach_three_s">stufff</div>
<div class="infotab teach_round" id="teach_four_s">stufff</div>
<div class="infotab teach_round" id="teach_five_s">stufff</div>

你可以很容易地連接一些這樣的功能：

$(function(){
    $(".infotab").hide(); // hide all content on load
    $("#teach_home_navigator_tabs li").click(function(e){
        var id = this.id;
        var $current = $("#infotab:visible"); // get the currently selected tab
        if ($current.length == 0) { }           
            $(current.fadeOut("fast", function() { // fade out current
                $("#" + id = "_s").fadeIn("slow"); // fade in selected
            });
        }
        else { $("#" + id = "_s").fadeIn("slow"); } // fade in selected if no current
    });

    $(".teach_home_navigator_tabs li:first").click(); // click first tab on load
});

Answer 3

您可以像這樣重寫代碼。 所有faddIn的fadeOut除了單擊之外，它faddIn

$("#teach_one, #teach_two, #teach_three, #teach_four, #teach_five").click(function() {   
    var idd = this.id;
    $("#teach_one_s, #teach_two_s, #teach_three_s, #teach_four_s, #teach_five_s").fadeOut("fast ");
    $("#"+idd+"_s ").fadeIn("slow");
});

Answer 4

這樣做：

$("#teach_one").click(function() {
    $("#teach_one_s").fadeIn("slow", function() {
        $("#teach_two_s").fadeOut("fast");
        $("#teach_three_s").fadeOut("fast");
        $("#teach_four_s").fadeOut("fast");
        $("#teach_five_s").fadeOut("fast");
    });
});

其余的重復，基本上等待fadeIn完成然后調用回調函數fadeOut其余的。

但你的代碼可以明顯縮短恕我直言，如果你顯示你的HTML我敢打賭它可以壓縮成一個click綁定。

Answer 5

使用：

$('#teach_four_s').animate({opacity:0},200)

其中200是效果持續時間的毫秒數

這樣您就可以更好地控制轉換的時間

Answer 6

這是我正在使用的HTML。

<ul class="noselect teach_home_navigator_tabs">

stufff stufff stufff stufff stufff