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

-1

我已經 'N' 按鈕jQuery.fadeOut（） - 如何順序應用到一組元素？

我需要

$('BUTTON').fadeOut();

...但我希望看到在時間一個按鈕消失..

如何？

我嘗試使用下一個，但在隨後的一個時刻

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

方式全部消失，我試圖用淡出，以淡出了下，但我還沒有按鈕的總數初始索知識。

我試着使用$。每（），但沒有成功

編輯：

這是工作的解決方案我選用：

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

});

來源

2013-03-27 realtebo

爲什麼我downvoted這個問題：http://meta.stackexchange.com/a/149138/133242 – 2013-03-27 22:13:16

我明白，所以我完成了我的問題 – realtebo 2013-03-27 22:16:25

您可以使用delay爲：

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

Live Example | Source

計劃每個按鈕在450ms間隔內以500ms爲間隔淡出。

delay非常適合當您使用任何效果方法。如果你需要的東西，是不影響套件的一部分來做到這一點（如hide，例如），你必須做你自己setTimeout：

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

Live Example | Source

來源

2013-03-27 22:12:33

哇，這只是工作！ – realtebo 2013-03-27 22:20:32

@realtebo：是的，'延遲'很方便。只適用於「效果」方法（如'fadeOut'），而不適用於'hide'等。有了'隱藏'等，你必須自己做'setTimeout'。 – 2013-03-27 22:22:50

很基本的例子，你可以鏈回調函數：

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

來源

2013-03-27 22:13:28

我沒有元素的總數 – realtebo 2013-03-27 22:17:55

廣義級聯避免了事先安排的一切，可以說是清潔：

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

這是有效@ AlexOsborn的方法，但任何大小的集合。

稍微想一想，你甚至可以引入一個停止中間級聯的機制。

http://jsfiddle.net/zE6nq/

來源

2013-03-27 22:39:01

它看起來像一個jQuery隊列可以用於此目的。儘管隊列通常用於順序執行單個元素的動畫，但似乎可以將多個元素用於一個動畫。訣竅是使用隊列爲主體元素，像這樣：

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

我通過@schmunk從回答這個技術this question。

Live Demo

來源

2013-03-27 22:53:38

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

回答

相關問題