jQuery.fadeOut（）-如何按順序應用於一組元素？

Question

我有n個按鈕

我需要

$('BUTTON').fadeOut();

...但我想一次看到一個按鈕消失..

如何 ？

我嘗試使用next，但是通過以下方式所有內容在一瞬間消失

$(".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);
});

現場示例 | 資源

這樣可以安排每個按鈕以450ms的間隔在450ms內逐漸消失。

當您使用任何效果方法時， delay都非常有用。 如果您需要使用不屬於效果套件的內容（例如hide ），則必須執行自己的setTimeout ：

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

現場示例 | 資源

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到這個問題 。

現場演示