Der Rückruf von .animate () wird zweimal jquery aufgerufen

Da ich eine scrollTopAnimation hinzugefügt habe, werden einige Teile meines Rückrufs zweimal aufgerufen:

$('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);                    
        });
    });
});

Es scheint nur das zu wiederholen .show(), zumindest habe ich nicht den Eindruck, dass das load()oder das .fadeIn()auch ein zweites Mal aufgerufen wird. Das .show()wird wiederholt, sobald es zum ersten Mal beendet ist. Das Einstellen der scrollTop-Animationsgeschwindigkeit auf 0hat übrigens nicht geholfen!

Ich nehme an, es hat etwas mit der Animationswarteschlange zu tun, aber ich kann nicht herausfinden, wie man eine Problemumgehung findet und insbesondere, warum dies geschieht.

animateruft seinen Rückruf einmal für jedes Element in der Menge auf, die Sie aufrufen animate:

Wenn geliefert, die start, step, progress, complete, done, fail, und alwaysRückrufe werden auf einer gerufenen pro-Element - Basis ...

Da Sie zwei Elemente (das htmlElement und das bodyElement) animieren , erhalten Sie zwei Rückrufe. (Wenn Sie sich fragen, warum das OP zwei Elemente animiert, funktioniert die Animation bodyin einigen Browsern, htmlin anderen Browsern jedoch.)

Um einen einzelnen Rückruf zu erhalten, wenn die Animation abgeschlossen ist, animateweisen Sie die Dokumente darauf hin, dass Sie die promiseMethode verwenden, um ein Versprechen für die Animationswarteschlange zu erhalten, und dann thenden Rückruf in die Warteschlange stellen:

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

(Anmerkung: Kevin B hat in seiner Antwort darauf hingewiesen , als die Frage zum ersten Mal gestellt wurde. Ich habe es erst vier Jahre später bemerkt, als ich bemerkte, dass sie fehlte, sie hinzugefügt und ... dann Kevins Antwort gesehen. Bitte geben Sie seiner Antwort die Liebe, die es verdient. Ich dachte, da dies die akzeptierte Antwort ist, sollte ich es belassen.)

Hier ist ein Beispiel, das sowohl die Rückrufe einzelner Elemente als auch den Rückruf zur vollständigen Fertigstellung zeigt:

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>

Verwenden Sie zurückgestellte Objekte, um einen einzelnen Rückruf für die Fertigstellung von Animationen mit mehreren Elementen zu erhalten.

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

In der jQuery-API finden Sie eine detaillierte Beschreibung der Promise- und Deferred-Objekte .