以特定間隔附加功能

Question

我有3個div，其中有一個簡單的動畫可以從右向左滑動。如何通過對其應用功能來設置間隔。

例如2nd 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

jQuery的動畫已經完成動畫時被稱爲「完整的」財產。 例子：

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

看到api

Answer 3

請嘗試以下代碼，它會爲你工作..

$(".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/