Question

我有3个btns，它们是无序列表中的简单锚标签，每个都有一个相应的id为t1，t2和t3。我也有3个类似的btns隐藏着css，他们各自有t1-discover，t2-discover和t3-discover。我想要实现的是，例如，当t1在5秒后点击它时，它会消失，发现并发现t2-discover和t3discover，t2＆amp; 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时它不会取消其他2个动画，它们会淡入但是留在那里有一种方法可以说fadeIn但也取消并重置另一个2个动画？我还想学习如何更有效地做到这一点我确信这段代码非常好，但我还在学习！希望这是有意义的，并提前感谢。

Answer 1

问题是其他对象的动画还没有开始，因为它是在超时时调用的。

您需要先清除现有超时..

此外，由于您的代码对于每个按下的项目都是相同的，您应该对其进行概括，并且只编写一次..

我会将ID设置为您使用的<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

您是否尝试使用.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);

});

Answer 3

这就是为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 + ....但是如果你刚刚开始，希望这不是问题。

jQuery淡入/显示延迟菜单

3 个答案: