在某个间隔附加功能

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

});

基于小提琴的工作演示： http://jsfiddle.net/xZn3u/1/

Answer 2

请尝试以下代码，它将适合您..

$(".trigger").click(function (){
   var el = $(".Objects");
   $.each( el, function( key, value ) {
     var tm = 1000*key;
     $(value).delay(tm).animate({left:'0px'});
   });
});

请查看以下链接以查看输出

http://jsfiddle.net/xZn3u/4/

Answer 3

jQuery的animate有一个'complete'属性，在动画完成时会调用它。 例如：

$item.animate({left:'0px'}, function() {
    // next call
});

请参阅api