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>

我想在这个content div 中使用update 类为每个div 设置动画。我像这样为它们设置动画：

$('#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);
});