jquery - 如何让元素一张一张滑入？

Question

我正在尝试使元素(div)一一滑入。但我得到的只是所有元素同时滑动。老实说我不明白为什么。对我来说一切看起来都是正确的。谁能帮我吗？

HTML:

<div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
</div>

CSS:

.box {
   width:100px;
   height:100px;
   background-color:red;
   margin:20px 20px 20px 500px;       
      }

jQuery:

$(document).ready(function() {
                $('.box').css('margin-left', -200)
                $('.box').each(function() {
                $(this).delay(5000).animate({
                    'marginLeft' : "+=700px"
                }, 2000);
                });
            });

jsfiddle:http://jsfiddle.net/87yjhybd/

非常感谢任何帮助!/最好的问候约翰

Answer 1

像这样吗？

$(document).ready(function() {
     $('.box').css('margin-left', -200)
     $('.box').each(function(i) {
        $(this).delay(5000*i).animate({
            'marginLeft' : "+=700px"
        }, 2000);
    });
});

已更新

我错过了 $(document).ready(); :)

DEMO

更新2

$('.box').each(function(index, element){...

index，在我的代码中是i，是循环中当前元素的索引。元素 - 值。它是索引为 index

的元素的 DOM 对象

您可以在 jQuery documentation 中看到它