jquery - 如何排隊一系列css屬性更改

Question

我想要設置一系列動畫屬性 - 一個當前不可見的名稱列表，但將被標記爲可見，一個接一個地，設置延遲約彼此之間100ms。我如何使用jquery完成此任務？從本質上講，它會是這樣的（僞代碼）：

for each $(.item) { 
$(this).delay(index*100ms).css({'visibility': 'visible'} 
} 

可能會加劇這一點，而大多數元素將具有相同的類，而不是所有的人都將唯一的事情，所以動畫隊列某種方式最好。

Answer 1

您可以使用.delay()來做到這一點。

$('#foo').slideUp(300).delay(800).fadeIn(400); 

當執行該語句時，元件滑動開300毫秒，然後400毫秒淡入之前暫停800毫秒。

你真正想要做一件事到多個項目，所以這是我怎麼會做：

$.each($(".a"), function(index, value) { 
    $(this).delay(index*400).fadeOut(400); 
}); 

你在正確的軌道與你的僞代碼，你需要偏移每個動畫通過index * someTime。

原來，.delay()其實並不用這麼css()工作here's更新的解決方案：

$.each($(".a"), function(index, value) { 
    $(this).delay(index*400).queue(function(next){ 
     $(this).css('visibility','visible'); 
     next(); 
     }); 
}); 

demo