如何让元素一个一个地滑入？

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，是循环中当前元素的索引。 element - 价值。它是索引为 index

的元素的 DOM 对象

你可以在jQuery documentation

中看到它

Answer 2

$("#mycarousel li").hover(function () {
    $(this).find('.box').stop(true,true).animate({ top : -45});
},function () {
    $(this).find('.box').stop(true,true).animate({ top : -5});
});

如何让元素一个一个地滑入？

How to make elements slide in one by one?

each

jquery

jquery-animate