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);
    });
});

<强>已更新

我错过了$（文件）.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});
});

如何让元素逐个滑动？

2 个答案: