jQuery исчезают / показывают меню задержки

Question

У меня есть 3 btns, которые являются простыми тегами привязки в неупорядоченном списке, каждый из которых имеет соответствующий идентификатор t1, t2 и t3. У меня также есть 3 аналогичных btns, которые скрыты с помощью css, они имеют соответствующие идентификаторы t1-Discover, t2-Discover и t3-Discover. То, чего я хочу достичь, - это, скажем, нажать t1 через 5 секунд, когда он исчезает в t1-Discover и исчезает в t2-Discover и t3discover, то же самое для t2 и t3. Вот моя попытка с jQuery:

$("#t1").click(function() {
            $("#t2-discover").stop().fadeOut(10);
            $("#t3-discover").stop().fadeOut(10);

            // delay fadein of link
            setTimeout(function() { 
                $('#t1-discover').fadeIn(2000);
            }, 5000);

        });

        $("#t2").click(function() {
            $("#t1-discover").stop().fadeOut(10);
            $("#t3-discover").stop().fadeOut(10);

            // delay fadein of link
            setTimeout(function() { 
                $('#t2-discover').fadeIn(2000);
            }, 5000);

        });

        $("#t3").click(function() {
            $("#t1-discover").stop().fadeOut(10);
            $("#t2-discover").stop().fadeOut(10);

            // delay fadein of link
            setTimeout(function() { 
                $('#t3-discover').fadeIn(2000);
            }, 5000);           
        });

Это вроде работает, задержка и затухание есть, но когда нажата одна btn, она не отменяет две другие анимации, в которых они появляются, но остается, есть способ сказать fadeIn, но также отменить и сбросить другую 2 анимации? Я также хотел бы научиться делать это более эффективно, я уверен, что этот код очень удивительный, но я все еще учусь! Надеюсь, что это имеет смысл и спасибо заранее.

Answer 1

Проблема в том, что анимация других объектов еще не началась, так как она вызывается по таймауту.

Сначала необходимо удалить существующие тайм-ауты.

Кроме того, поскольку ваш код идентичен для каждого нажатого элемента, вы должны обобщить его и написать его только один раз.

я бы поставил идентификатор для <ul> или <ol>, который вы используете, например

<ul id="#t-list">

и в jQuery напишите ..

var clear; // this hold the timeoutObject
// the following selector will find all links 
// that are children to the #t-list element
$("#t-list a").click(
    function() {
           // the following will fadeOut all elements whose id
           // ends in -discover so that it works with an arbitrary number of them..
           // the $= in the selector means ends with
            $("[id$='-discover']").stop().fadeOut(10);


            var $thisid = this.id; // get the id of the current element so we can use it in the timeout
            // delay fadein of link
            // assign the timeout to a variable so we can clear it
            // later on 
            clearTimeout( clear ); //here we remove current timeouts that have not executed yet..
            clear = setTimeout(function() { 
                                   // use the this keyword instead of the actual id
                                   // to generalize it. it means use the current item
                                   $("[id='"+$thisid+"-discover']").fadeIn(2000);
                                  }, 
                       5000);
           }
  );

Answer 2

Это то, для чего была создана очередь jQuery :). Вы можете использовать .delay() и .dequeue() на элемент. Это мгновенно исчезнет с других, вернет выбранную обратно через 5 секунд и отменит все оставшиеся анимации

$("#t1").click(function() {
    $("#t2-discover, #t3-discover").dequeue().stop().fadeOut(10);
    $('#t1-discover').delay(5000).fadeIn(2000);
});

$("#t2").click(function() {
    $("#t1-discover, #t3-discover").dequeue().stop().fadeOut(10);
    $('#t2-discover').delay(5000).fadeIn(2000);
});

$("#t3").click(function() {
    $("#t1-discover, #t2-discover").dequeue().stop().fadeOut(10);
    $('#t3-discover').delay(5000).fadeIn(2000);
});

Обратите внимание, что для этого требуется jQuery 1.4 + .... но если вы только начинаете, надеюсь, это не проблема.

Answer 3

Вы пытались использовать .stop(true,true) для удаления анимаций, поставленных в очередь, и немедленного завершения текущей анимации? Вы также можете комбинировать селекторы, чтобы уменьшить код.

$("#t1").click(function() {
    $("#t2-discover,#t2-discover").stop(true,true).fadeOut(10);

    // delay fadein of link
    setTimeout(function() { 
        $('#t1-discover').fadeIn(2000);
    }, 5000);

});