jquery - 以特定间隔附加功能

Question

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

例如，第 2 个 div 应该在第 1 个延迟时滑动，并且应该在第 3 个之后像这样设置动画。

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 命令。它在指定的延迟后执行一个函数。

在迭代包含所选 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 的动画有一个“完成”属性，当动画完成时会调用它。例子：

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

见api