Как я могу сделать этот JQuery быстрее, чем у меня есть?

Question

В настоящее время я использую этот скрипт для типа «вкладки» системы.Когда нажата одна вкладка, она скрывает все остальные.Они все дивы.Но сейчас я не думаю, что он угасает достаточно быстро, пока не загрузится выбранный div.В итоге происходит смещение под выбранным div и теперь он показывает.

Я не хочу переключаться, потому что, как вы видите, у меня есть 5 вкладок, которые я хочу открыть их соответствующие "_s"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>

Answer 1

Не видя вашей разметки, я не могу быть уверен, но, просто чтобы упростить ваш jQuery и уменьшить количество повторений, вы можете попробовать что-то вроде этого:

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

<ч />

Отредактировано в ответ на html, предоставленный @ Josh.

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

Ссылки:

• Селектор запускается с атрибутом: ^=.
• селектор с атрибутом заканчивается: $=.
• not().

Answer 2

Вы можете переписать свой код следующим образом.Все # идентификаторы 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");
});

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

Answer 4

Вот мой HTML-код, который я использую.

<ul class="noselect teach_home_navigator_tabs">

stufff stufff stufff stufff stufff stufff

Answer 5

use:

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

, где 200 - миллисекунды для длительности эффекта

Это позволит вам лучше контролировать время перехода

Answer 6

Делай так:

$("#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, затем вызывает функцию обратного вызова для fadeOut остальной части.

Но ваш код может быть значительно короче ИМХО, если вы покажете свой HTML, я уверен, он может быть сжат в одну click привязку.