jQuery的動畫不單獨運行

Question

我有以下內容：

<div id="content"> 
    <div class="update">1.</div> 
    <div class="update">2.</div> 
    <div class="update">3.</div> 
    <div class="update">4.</div> 
</div> 

我想每一個div這個content DIV中的update類動畫。我給他們這樣動畫：

$('#content div.update').each(function(){ 
    $(this).animate({ 
     'margin-top': '10px', 
     'opacity': 1 
    }, 300); 
}); 

我發現動畫一次全部運行。我查了一下queue的功能，但它根本就不理我。我發現了一些博客文章，但他們使它變得複雜。有人能給我一個例子，說明我應該如何排列這個正確的排列，以便每個div.update一個接一個地動畫？

Answer 1

嘗試：

See jsFiddle

$('#content div.update').each(function(i){ 
    $(this).delay(i*300).animate({ 
     'margin-top': '10px', 
     'opacity': 1 
    }, 300); 
});