我怎样才能使这个 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');
            });
    });

---

编辑 响应由提供的 html @乔什。

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

参考文献：

• attribute-starts-with 选择器：^=。
• attribute-ends-with 选择器：$= 。
• not()。

Answer 2

你可以像这样重写你的代码。除了点击的 #id 之外，所有 #id 的 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 3

根据您的 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 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 完成，然后调用回调函数淡出其余部分。

但是恕我直言，您的代码可以明显缩短，如果您显示您的 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