O retorno de chamada de .animate () é chamado duas vezes jquery

Como eu adicionei alguma scrollTopanimação, algumas partes do meu retorno de chamada são chamadas duas vezes:

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

Parece apenas repetir o .show(), pelo menos não tenho a impressão de que o load()ou também .fadeIn()seja chamado uma segunda vez. O .show()é repetido assim que termina pela primeira vez. A propósito, definir a velocidade da animação scrollTop para 0não ajudou!

Presumo que tenha algo a ver com a fila de animação, mas não consigo descobrir como encontrar uma solução alternativa e, especialmente, por que isso está acontecendo.

animatechama seu callback uma vez para cada elemento no conjunto que você chama animate:

Se fornecido, o start, step, progress, complete, done, fail, e alwayschamadas de retorno são chamados em uma base per-elemento ...

Como você está animando dois elementos (o htmlelemento e o bodyelemento), você obtém dois retornos de chamada. (Para quem está se perguntando por que o OP está animando dois elementos, é porque a animação funciona bodyem alguns navegadores, mas htmlem outros.)

Para obter um único retorno de chamada quando a animação estiver concluída, os animatedocumentos indicam o uso do promisemétodo para obter uma promessa para a fila de animação e, em seguida, usar thenpara enfileirar o retorno de chamada:

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

(Observação: Kevin B apontou isso em sua resposta quando a pergunta foi feita pela primeira vez. Só fiz isso quatro anos depois, quando percebi que estava faltando, adicionei e ... então vi a resposta de Kevin. Dê sua resposta amor que merece. Achei que esta é a resposta aceita, deveria deixá-la como está.)

Aqui está um exemplo que mostra os retornos de chamada de elemento individual e o retorno de chamada de conclusão geral:

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>

Para obter um único retorno de chamada para a conclusão de animações de vários elementos, use objetos adiados.

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

Consulte a API jQuery para obter uma descrição detalhada de Promise and Deferred Objects .