Wywołanie zwrotne .animate () jest wywoływane dwukrotnie jQuery

Ponieważ dodałem trochę scrollTopanimacji, niektóre części mojego wywołania zwrotnego są wywoływane dwukrotnie:

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

Wydaje się, że tylko się powtarza .show(), przynajmniej nie mam wrażenia, że load()albo ktoś dzwoni .fadeIn()po raz drugi. .show()Się powtarza, jak tylko zakończy się po raz pierwszy. Ustawienie szybkości animacji scrollTop na 0nie pomogło!

Zakładam, że ma to coś wspólnego z kolejką animacji, ale nie mogę znaleźć rozwiązania, a zwłaszcza dlaczego tak się dzieje.

animatewywołuje swoje wywołanie zwrotne raz dla każdego elementu w przywoływanym zestawie animate:

Jeśli podany, start, step, progress, complete, done, fail, i alwayswywołania zwrotne są nazywane na podstawie na elemencie ...

Ponieważ animujesz dwa elementy ( htmlelement i bodyelement), otrzymujesz dwa wywołania zwrotne. (Dla każdego, kto zastanawia się, dlaczego OP animuje dwa elementy, dzieje się tak dlatego, że animacja działa bodyw niektórych przeglądarkach, ale htmlw innych)

Aby uzyskać pojedyncze wywołanie zwrotne po zakończeniu animacji, animatedokumenty wskazują, że należy użyć promisemetody, aby uzyskać obietnicę kolejki animacji, a następnie użyć thendo kolejkowania wywołania zwrotnego:

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

(Uwaga: Kevin B zwrócił na to uwagę w swojej odpowiedzi, kiedy zadawano to pytanie. Dopiero cztery lata później zauważyłem, że go brakuje, dodałem go i ... potem zobaczyłem odpowiedź Kevina. Proszę, podaj jego odpowiedź uwielbiam, na to zasługuje. Pomyślałem, że skoro jest to akceptowana odpowiedź, powinienem ją zostawić).

Oto przykład pokazujący zarówno wywołania zwrotne poszczególnych elementów, jak i ogólne wywołanie zwrotne zakończenia:

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>

Aby uzyskać pojedyncze wywołanie zwrotne w celu zakończenia animacji wielu elementów, użyj obiektów odroczonych.

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

Zobacz interfejs API jQuery, aby uzyskać szczegółowy opis obiektów Promise i Deferred .