jQuery的動畫每個項目

Question

我有這個名單，我想通過每個列表項的動畫，主要有每個項目的移動幾釐米向上級聯效應。

我已經爲了達到這個創造了這個代碼，但它似乎它的動畫貫穿整個列表，而不是單獨的列表項。

JS - jQuery的

$("#energy_guide ul").animate({"top" : "+=20px"}, "fast"); 

和HTML

<ul class="guide-block-list us-list" id="energy_guide"> 
    <li> 
     <a href="#">Item 1</a> 
    </li> 

    <li> 
     <a href="#">Item 2</a> 
    </li> 
</ul> 

你們是否有任何關於我如何才能做到這一點有什麼建議？

謝謝

Answer 1

此代碼將做你想做的。

var delay_time = 0; 
$("#energy_guide ul li").each(function() { 
    $(this).delay(delay_time).animate({"top" : "+=20px"}, "fast"); 
    delay_time += 200; 
}); 

它循環遍歷每個li's。第一li將具有0的延遲，200毫秒的第二延遲，400毫秒等第三延遲。所以它會在不同的時間對它們進行動畫處理，一個接一個。如果您希望它更快更慢，請隨時更改延遲時間並從200增加到其他值。