Comment attendre qu'une animation de jquery se termine avant que la suivante ne commence?

J'ai le texte suivant jQuery:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

Mon problème est que les deux arrivent en même temps. Je voudrais la div2 animation pour démarrer quand le premier se termine. J'ai essayé la méthode ci-dessous, mais il fait la même chose:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

Comment puis-je le faire attendre pour le premier à la fin?

source d'informationauteur Abe Miessler

  1. 21

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

    animate a une "complète" de la fonction. Vous devez placer la 2ème animation dans la fonction complète de la première.

    EDIT: exemple http://jsfiddle.net/xgJns/

    $("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});​
  2. 2
    $(function(){
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
    });
});

    http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

  3. 1

    Vous pouvez passer une fonction en paramètre à la animer(..) fonction qui est appelée après que l'animation est terminée. Comme:

    $('#div1').animate({
    width: 160
}, 200, function() {
    //Handle completion of this animation
});

    L'exemple ci-dessous est une explication plus claire des paramètres. 

    var options = { },
    duration = 200,
    handler = function() {
        alert('Done animating');
    };

$('#id-of-element').animate(options, duration, handler);
  4. 1

    À la suite de ce kingjiv dit, vous devez utiliser le complete de rappel à la chaîne de ces animations. Vous avez presque dans ton deuxième exemple, sauf que vous êtes l'exécution de votre ShowDiv rappel immédiatement par la suite avec des parenthèses. Mis à ShowDiv au lieu de ShowDiv() et cela devrait fonctionner.

    mcgrailm réponse (posté que j'ai écrit ce) est effectivement la même chose, seulement à l'aide d'une fonction anonyme pour le rappel.

  5. 1

    N'utilisez pas de délai d'attente, utilisez le rappel.

    $("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){

  $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

});
  6. 0
    $("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });

    Cela fonctionne pour moi. Je ne sais pas pourquoi ton code ne fonctionne pas. Peut-être qu'il a besoin d'être incased dans une fonction anonyme?