我怎样才能使这个jQuery比我拥有的更快? [英] How can I make this jQuery faster than what I have?

问题描述

当前，我正在将此脚本用于一种类型的选项卡"系统.单击一个选项卡时，它将隐藏所有其他选项卡.它们都是div的.但是现在，我认为在选定的div加载之前，它的褪色速度还不够快.最终，它在选定的div下方移动了，并显示出来了.

Currently, I am using this script for a type of "tab" system. When one tab is clicked, it hides all the others. They are all div's. But right now, I don't think it's fading fast enough before the selected div loads. It ends up getting shifted underneath the div that was selected and is now showing.

我不希望切换，因为如您所见，我有5个标签，当我单击它们时，我想打开它们各自的"_s" div.淡入淡出.

I don't want a toggle, because as you can see, I have 5 tabs that I want to open their respective "_s" div when they are clicked. Fade out, fade in.

有什么方法可以使淡出发生在淡入之前，或者可能会增加延迟?我不知道如何在此脚本中添加延迟，或者不知道在新的div淡入之前检查div是否完全淡化.

Any way to make the fade out happen before the fade in, or maybe add in a delay? I do not know how to add in a delay into this script, or to check to make sure the div is completely faded before the new div fades in.

我将不胜感激.谢谢！

<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:

Here's my HTML at your request:

<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并减少重复，您可以尝试使用一些方法像这样:

Without seeing your mark-up I can't be sure, but, and just to simplify your jQuery, and to reduce your repetition, you could try using something like this:

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

---

已编辑，以响应@Josh提供的html.

---

Edited in response to html provided by @Josh.

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

参考文献:

• 属性-starts-with选择器:^= .
li>
• 属性-ends-with选择器:$= . li>
• not() .

• attribute-starts-with selector: ^=.
• attribute-ends-with selector: $=.
• not().

这篇关于我怎样才能使这个jQuery比我拥有的更快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！