How can I make this jQuery faster than what I have?

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.

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.

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.

I'd appreciate any help. Thank you!

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

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>

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');
            });
    });

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');
            });
    });

References:

You can re-write your code like this. All #id's fadeOut except for the one clicked, it 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");
});

Updated based on your 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>

and you can easily wire up some functionality like so:

$(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
});

Do like this:

$("#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");
    });
});

Repeat for the rest, basically this waits for fadeIn to finish then calls the callback function to fadeOut the rest.

But your code can be significantly shorter IMHO, if you show your html I bet it can be compressed into one click binding.

use:

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

where 200 is milliseconds for effect duration

This will allow you to have better control over the timing of the transitions

Here is my HTML that I am using.

<ul class="noselect teach_home_navigator_tabs">

stufff stufff stufff stufff stufff

来源：https://stackoverflow.com/questions/5399632/how-can-i-make-this-jquery-faster-than-what-i-have

标签

jquery

performance

delay

fadein

fadeout