CODEWITHSUNDEEP
jqueryperformancedelayfadeinfadeout
Josh
Josh

Reputation: 41

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>

Upvotes: 4

Views: 483

Answers (6)

hunter
hunter

Reputation: 63522

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 2

Josh
Josh

Reputation: 41

Here is my HTML that I am using.

<ul class="noselect teach_home_navigator_tabs">

stufff stufff stufff stufff stufff

Upvotes: 0

Hussein
Hussein

Reputation: 42818

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

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58551

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

Upvotes: 0

moe
moe

Reputation: 29714

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.

Upvotes: 0

Related Questions