jquery - 以一定的时间间隔追加功能

Question

我有 3 个 div，有一个简单的动画从右向左滑动。如何通过应用函数来设置间隔。

例如，第二个 div 应该在第一个延迟时滑动，并且应该在第三个之后像这样动画。

HTML

<div class="Objects"></div>
<div class="Objects"></div>
<div class="Objects"></div>
<button class="trigger">Click Me</button> 

CSS

.Objects{ width:200px; height:100px; background:#ccc; margin:10px; position:relative; left:500px;}

脚本

$(".trigger").click(function () {
  $(".Objects").animate({left:'0px'});
});

工作链接

http://jsfiddle.net/vivekdx/xZn3u/

Answer 1

我正在使用setTimeout command 。它在指定的延迟后执行函数。

在迭代包含所选 div 的 jQuery 数组时，我将基本延迟与当前索引相乘。因此，每次迭代时对 slideLeft 函数的每次调用都会延迟更多。

我将您的脚本更改为以下内容:

var slideLeft = function($item) {
    $item.animate({left:'0px'});
}

$(".trigger").click(function () {
//      $(".Objects").animate({left:'0px'});

    $(".Objects").each(function(index, item) {
        setTimeout(slideLeft, 200 * (index + 1), $(item));
    });

});

基于您的 fiddle 的工作演示: http://jsfiddle.net/xZn3u/1/