Добавить функцию в определенный интервал

Question

У меня есть 3 div, которые имеют простую анимацию для перемещения справа налево. Как установить интервалы, применяя к ним функции.

Например, 2-й дивизор должен сдвигаться с 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;} 

Script

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

Рабочая ссылка

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

Answer 1

Я использую setTimeout command. Выполняет функцию после указанной задержки.

Итерируя по массиву jQuery, содержащему выбранные div, я умножаю базовую задержку на текущий индекс. Поэтому каждый вызов функции 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/