Commencer à animer div quand les autres animations div sont terminées

Question

Je travaille sur une animation jquery-to-être plutôt complexe qui déplace divers div basés sur différents événements déclencheurs. Pour simplifier le scénario que je suis en train de résoudre est la suivante:

1. Je DIV 1 et DIV 2 sur l'écran
2. DIV 1 doit animer de la position A à la position B
3. DIV 2 doit aussi l'animation de la position C à la position D, mais SEULEMENT quand DIV 1 atteint la position B.

Comment devrais-je faire quelque chose comme ça? Je pense que je dois utiliser un mécanisme trigger/event listener, que DIV 2 se met en veille, et ne se réveille que par un événement qui se déclenche quand DIV 1 atteint la position B sur l'écran.

Est-ce le meilleur état d'esprit que je devrais avoir? Comment je fais cela en utilisant jQuery.

Très apprécié.

Answer 1

Je fini par venir avec la solution suivante qui permet de résoudre ma situation:

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

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

je l'ai trouvé préférable d'utiliser des déclencheurs plutôt que appeler directement des animations imbriquées dans le rappel complet. Rend mon codage beaucoup plus propre pour l'animation complexe que j'ai.

Answer 2

La fonction animate vous permet de spécifier un rappel qui est exécuté lorsque l'animation se termine:

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

Answer 3

jQuery a une animate function qui accepte un rappel. Animez DIV 2 ici.

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