Jquery анимировать, когда другая анимация в процессе

Question

Я использую простую анимацию ослабления данную здесь, используя JQUERY EASING PLUGIN
ieeasing в DIV с левым: 200 налево:. 0 и обратно (последним примером на странице выше)

У меня есть несколько divs в контейнере div.and, что я хочу сделать, это анимировать 4 divs следующим образом:

1] Предположим, если у меня есть два divs, div1 и div2. , когда div1 анимируется, и анимация находится в процессе анимация div2 должна начинаться с начала.: Когда div1 перемещается слева = 200 влево = 0, анимация div2 должна начинаться, когда div1 слева = 100.

Редактировать (Примечание: число дивы являются переменными)

.......

Когда тока выполняется анимация и достигает точки next анимация должна начинаться (эффект анимации такой же из всех div).

2] Итерируя коллекцию div и анимируя, задерживайте следующую анимацию в течение заданного интервала времени.

Есть ли способ узнать начало анимации? или анимация продолжается?

Спасибо всем

Answer 1

Вы можете использовать «: анимированный» псевдо-селектор, чтобы выяснить, если элемент находится в настоящее время в движении:

if ($('#div1').is(':animated')) { 
    // do something 
} 

http://api.jquery.com/animated-selector/

Вы можете также попробовать step опция для проверки, когда div2 должен начать оживать:

$('#div1').animate({ 
    left:0 
},{ 
    step: function() { 
     // check distance and animate div2 when it reaches 100 
    } 
}); 

http://api.jquery.com/animate/

Answer 2

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

setTimeout(doAnimate($div1),100);setTimeout(doAnimate($div2),200); 

т.д.

Answer 3

Вы можете добавить функцию обратного вызова функции одушевленным:

$('#div1').animate(
{ left: 0 }, 
{ duration: 'slow', easing: 'easeOutBack' }, 
function(){ 
    //Do what you want in here, it will be executed once the animation above is completed. 
)}; 

Answer 4

Ответ вы ищете лжи в параметре «шаг».

Вы можете определить параметр шага, который вызывается последовательно на протяжении всей анимации. На каждом шаге вы можете проверить ход анимации, и если он достиг порога, вы можете запустить вторую анимацию.

Например:

$item1 = $("#myItem1"); 
$item2 = $("#myItem2"); 

$item1.animate({width: 500}, { 
    duration: 1000, 
    step: function(now, fx) { 
    if (fx.state > 0.5 && fx.prop === "width") { 
     if(!$item2.is(':animated')) // Make sure you didn't start the animation already 
     $item2.animate({width: 500}, 1000); 
    } 
    } 
}) 

Эта идея будет работать для любого числа дивы, хотя, очевидно, вы должны принять концепцию и изменить его для работы с вашим делом. Пожалуйста, дайте мне знать, если это поможет!

Подробнее о функции шага здесь:.