Le rappel de .animate () est appelé deux fois jquery

Depuis que j'ai ajouté quelques scrollTop-animation, certaines parties de mon callback sont appelées deux fois:

$('html, body').animate({scrollTop: '0px'}, 300,function() {
    $('#content').load(window.location.href, postdata, function() {                 
        $('#step2').addClass('stepactive').hide().fadeIn(700, function() {
            $('#content').show('slide',800);                    
        });
    });
});

Il semble seulement répéter le .show(), du moins je n'ai pas l'impression que le load()ou le .fadeIn()soit appelé une deuxième fois aussi. Le .show()se répète dès qu'il est terminé pour la première fois. Régler la vitesse d'animation scrollTop sur 0n'a pas aidé d'ailleurs!

Je suppose que cela a quelque chose à voir avec la file d'attente d'animation, mais je ne peux pas comprendre comment trouver une solution de contournement et surtout pourquoi cela se produit.

animateappelle son callback une fois pour chaque élément de l'ensemble que vous appelez animate:

Si elle est fournie, le start, step, progress, complete, done, failet alwayscallbacks sont appelés sur une base par élément ...

Puisque vous animez deux éléments (l' htmlélément et l' bodyélément), vous obtenez deux rappels. (Pour quiconque se demande pourquoi l'OP anime deux éléments, c'est parce que l'animation fonctionne bodysur certains navigateurs mais sur htmld'autres navigateurs.)

Pour obtenir un seul rappel lorsque l'animation est terminée, la animatedocumentation vous indique d'utiliser la promiseméthode pour obtenir une promesse pour la file d'attente d'animation, puis d'utiliser thenpour mettre en file d'attente le rappel:

$("html, body").animate(/*...*/)
    .promise().then(function() {
        // Animation complete
    });

(Remarque: Kevin B l'a souligné dans sa réponse lorsque la question a été posée pour la première fois. Je ne l'ai fait que quatre ans plus tard, lorsque j'ai remarqué qu'elle manquait, je l'ai ajoutée et ... j'ai ensuite vu la réponse de Kevin. Veuillez donner sa réponse. l'amour qu'il mérite. Je me suis dit que c'était la réponse acceptée, je devrais la laisser.)

Voici un exemple montrant à la fois les rappels d'élément individuels et le rappel d'achèvement global:

jQuery(function($) {

  $("#one, #two").animate({
    marginLeft: "30em"
  }, function() {
    // Called per element
    display("Done animating " + this.id);
  }).promise().then(function() {
    // Called when the animation in total is complete
    display("Done with animation");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

<div id="one">I'm one</div>
<div id="two">I'm two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Pour obtenir un seul rappel pour l'achèvement de plusieurs animations d'éléments, utilisez des objets différés.

$(".myClass").animate({
  marginLeft: "30em"
}).promise().done(function(){
  alert("Done animating");
});

Voir l'API jQuery pour une description détaillée de la promesse et des objets différés .