Question

我已经'n'按钮

我需要

$('BUTTON').fadeOut();

...但我希望看到一个按钮消失..

怎么样？

我尝试使用next，但是以下列方式ALL会在一瞬间消失

$(".genresButton").first().fadeOut().next().fadeOut()  ;

我尝试使用fadeOut来淡出下一个，但我没有按钮总数的初步知识。

我尝试使用$ .each（）但没有成功

编辑：

这是我选择的工作解决方案：

$("body").on('click', '.genresButton',  function(event) {
    $(".genresButton").not($(this)).each(function(index){
        $(this).delay(index * 500).fadeOut(450);
    });

});

Answer 1

您可以使用delay：

$('BUTTON').each(function(index) {
    $(this).delay(index * 500).fadeOut(450);
});

Live Example | Source

计划每个按钮在450毫秒的时间内淡出，间隔为500毫秒。

delay非常适合您使用任何效果方法。如果您需要使用不属于效果套件的部分（例如hide），则必须自己执行setTimeout：

$('BUTTON').each(function(index) {
    var btn = $(this);
    setTimeout(function() {
        btn.hide();
    }, index * 500);
});

Live Example | Source

Answer 2

真的是基本的例子，你可以链接回调函数：

$("#button1").fadeOut(1000, function(){
    $("#button2").fadeOut(1000, function(){
        $("#button3").fadeOut();
    });
});

Answer 3

广义级联避免了必须提前安排所有事情，并且可以说更清洁：

function seqFadeOut(jq, i) {
    jq.eq(i).fadeOut(function() {
        seqFadeOut(jq, i+1);
    });
}
seqFadeOut($(".genresButton"), 0);//start the cascade

这实际上是@AlexOsborn的方法，但适用于任何大小的集合。

稍加思考，您甚至可以引入一种在中游停止级联的机制。

http://jsfiddle.net/zE6nq/

Answer 4

看起来可以使用jQuery队列。虽然队列通常用于顺序执行单个元素的动画，但似乎可以使用一个元素用于多个元素。诀窍是使用body元素的队列，如下所示：

$('button').each(function() {
    var $button = $(this);
    $('body').queue(function() {
        $button.fadeOut(450, function() { $('body').dequeue(); });
    });
});

我从@schmunk的回答中得到了这种技术this question。

Live Demo

jQuery.fadeOut（） - 如何顺序应用于一组元素？

4 个答案: