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 с update класса внутри этого content дел. Я анимировал их следующим образом:

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

Я обнаружил, что анимация запускается сразу. Я посмотрел на функцию queue, но для меня это не имеет никакого значения. Я нашел некоторые статьи в блогах, но они усложняют процесс. Может ли кто-нибудь дать мне пример того, как я должен стоять в очереди так, чтобы он каждый анимировал каждый div.update?

Answer 1

Try:

See jsFiddle

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