Начните анимацию div, когда другие анимации div завершатся

Question

Я работаю над довольно сложной jquery-to-анимацией, которая перемещает различные div в зависимости от различных триггерных событий. Чтобы упростить сценарий, который я пытаюсь решить, это:

1. У меня есть DIV 1 и DIV 2 на экране
2. DIV 1 необходимо анимировать из положения A в положение B
3. DIV 2 также нуждается в анимации из положения C в положение D, однако ТОЛЬКО когда DIV 1 достигает положения B.

Как мне обходиться, делая что-то подобное?

Я думаю, что мне нужно использовать механизм trigger/event listener, когда DIV 2 переходит в спящий режим и просыпается только от события, которое срабатывает, когда DIV 1 достигает положения B.

Это лучшее мышление, которое я должен иметь? Как мне сделать это с помощью jQuery.

Очень ценится.

Answer 1

Функция animate позволяет указать обратный вызов, который запускается после завершения анимации:

$('#div1').animate({...}, 1000, 'linear', function() {
    $('#div2').animate({...}, 1000);
});

Answer 2

Я пришел к следующему решению, которое решает мою ситуацию:

div1.animate(
   {...},
   'complete' : function() {
      div2.trigger('myStartMove');
   }
);

div2.bind('myStartMove', function(ev){
   div2.animate(
      {...}
   );
});

Я нашел, что лучше всего использовать триггеры, а не напрямую вызывать вложенные анимации в полном обратном вызове. Делает мое кодирование намного чище для сложной анимации, которую я имею.

Answer 3

jQuery имеет функцию animate , которая принимает обратный вызов. Анимировать DIV 2 нет.

div1.animate({ ... }, 'slow', 'linear', function() {
    div2.animate({ ...}, ...);
});