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

Question

I am currently using this script for the tab type. When one tab is pressed, it hides all the others. These are all divas. But right now, I don’t think it will quickly disappear before the selected Div boots up. It ends up being shifted under the selected div and is now displayed.

I do not need to switch, because, as you see, I have 5 tabs that I want to open when they are clicked. Fade out, fade away.

Any way to make fade out a case before fading out or maybe add a delay? I do not know how to add a delay to this script, or check that the div completely disappears before the new div disappears.

I would appreciate any help. Thanks!

<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 is my HTML for 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> 

Answer 1

Without seeing your markup, I cannot be sure, but, and just to simplify your jQuery and to reduce repetition, you can 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 the html provided by @Josh.

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

Literature:

• the attribute begins with a selector: ^= .
• end of attribute - using selector: $= .
• not() .

Answer 2

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 connect some functions:

 $(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 3

You can rewrite the code in this way. All #id fadeOut with one click, it's 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 4

Do the following:

 $("#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 this for the rest, basically it waits for fadeIn to complete, then calls the callback function for the fadeOut of the rest.

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

Answer 5

using:

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

where 200 is the millisecond for the duration of the effect

This will allow you to better control the transition time.

Answer 6

Here is my HTML that I use.

 <ul class="noselect teach_home_navigator_tabs"> 

stufff stufff stufff stufff stufff