Il callback di .animate () viene chiamato due volte jquery

Poiché ho aggiunto un po 'di scrollTopanimazione, alcune parti della mia richiamata vengono chiamate due volte:

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

Sembra solo ripetere il .show(), almeno non ho l'impressione che anche il load()o il venga .fadeIn()chiamato una seconda volta. Il .show()ottiene ripetuto non appena ha finito per la prima volta. L'impostazione della velocità di animazione scrollTop su 0non è stata d'aiuto!

Presumo che abbia qualcosa a che fare con la coda dell'animazione, ma non riesco a capire come trovare una soluzione alternativa e soprattutto perché sta accadendo.

animatechiama la sua richiamata una volta per ogni elemento dell'insieme su cui chiami animate:

Se in dotazione, il start, step, progress, complete, done, fail, e alwayscallback vengono chiamate su una base per-elemento ...

Poiché stai animando due elementi (l' htmlelemento e l' bodyelemento), ricevi due callback. (Per chiunque si chieda perché l'OP stia animando due elementi, è perché l'animazione funziona bodysu alcuni browser ma htmlsu altri browser.)

Per ottenere una singola richiamata quando l'animazione è completa, i animatedocumenti indicano l'utilizzo del promisemetodo per ottenere una promessa per la coda dell'animazione, quindi utilizzare thenper accodare la richiamata:

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

(Nota: Kevin B lo ha sottolineato nella sua risposta quando la domanda è stata posta per la prima volta. Non l'ho fatto fino a quattro anni dopo, quando ho notato che mancava, l'ho aggiunto e ... poi ho visto la risposta di Kevin. Per favore, dai la sua risposta al l'amore che merita. Ho pensato che questa è la risposta accettata, dovrei lasciarla.)

Ecco un esempio che mostra sia i callback dei singoli elementi sia il callback di completamento complessivo:

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>

Per ottenere un singolo callback per il completamento di più animazioni di elementi, utilizzare oggetti differiti.

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

Consulta l'API jQuery per una descrizione dettagliata degli oggetti Promise e Deferred .