我怎样才能让这个 jQuery 比我拥有的更快？答案

【问题标题】：How can I make this jQuery faster than what I have?我怎样才能让这个 jQuery 比我拥有的更快？
【发布时间】：2011-07-20 22:55:31
【问题描述】：

目前，我将此脚本用于一种“标签”系统。单击一个选项卡时，它会隐藏所有其他选项卡。他们都是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>

【问题讨论】：

如果您发布您的标记或代表性示例，我们可能会简化您的 jQuery。很多，我想。
如果你展示你的 HTML，这会更容易。
它不会让我添加 HTML。它说我发布了太多链接。
查看我与您的标记相关的答案：stackoverflow.com/questions/5399632/…

标签： jquery performance delay fadein fadeout

【解决方案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');
            });
    });

参考资料：

【讨论】：

为什么fadeOut是fadeIn的回调？，我觉得应该反过来
是的，他是对的......如果我能看到 HTML 我猜这比这更简单
@Eric，是的，这也是我的偏好，但看看他设置 fx 队列的方式，他似乎想要在 fadeIn() 之前到 @987654330 @。虽然这让我有些困惑。
确实没有理由淡出所有其他内容，因为在任何给定时间当前应该只显示一个。我讨厌这个人...... j/k，我爱他
@hunter，我在 your 答案上做了 one 简单的suggestion 并且... =D 是的，你重新正确，但看看他的jQuery。我的意思是：呃。我只是覆盖基地并试图确保，真的......但谁知道那里还发生了什么？ =b

【解决方案2】：

您可以像这样重写您的代码。所有#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");
});

【讨论】：

这个和大卫的比较起来，这个似乎执行得更快，jsperf.com/teach
@Haochi，我认为您不了解 jsperf 的工作原理。数字越大速度越快。你的代码慢了 32%。
嗯，not in Chrome！虽然我会接受我所说的。 :)
@Haochi，我同意在 Chrome 中你的速度快 16%，但在 IE 和 Firefox 中，我的速度比你和 Davids 快 38%-45% :-)。不过，我确实喜欢你处理解决方案的方式。

【解决方案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
});

【讨论】：

this.id 在所有方面都稍微快了一点，并且达到了相同的结果。 :)
抱歉，我并不是想让你觉得自己很傻，但这是我记得当我第一次开始使用 jQuery 时犯了很多很多的错误之一......只是在尝试帮助 =)
刚刚搞定了一些东西，但是，是的，我很少需要 id，因为我不编写需要此类黑客的标记。
+1 用于快速鞭打，通常避免黑客攻击 =)
大家好，我无法添加我的 HTML。这里是：

【解决方案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 绑定。

【讨论】：

【解决方案5】：

使用：

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

其中 200 是效果持续时间的毫秒数

这将使您能够更好地控制转换的时间

【讨论】：

数字也可以代替“快”/“慢”业务......真的没有理由使用.animate。

【解决方案6】：

这是我正在使用的 HTML。

<ul class="noselect teach_home_navigator_tabs">

东西东西东西东西东西

【讨论】：