La devolución de llamada de .animate () se llama dos veces jquery

Desde que agregué algo de scrollTopanimación, algunas partes de mi devolución de llamada se llaman dos veces:

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

Solo parece repetir el .show(), al menos no tengo la impresión de que el load()o el sean .fadeIn()llamados por segunda vez también. El .show()se repite tan pronto como ha terminado por primera vez. ¡Establecer la velocidad de animación scrollTop en 0no ayudó por cierto!

Supongo que tiene algo que ver con la cola de animación, pero no puedo encontrar una solución y, especialmente, por qué sucede esto.

animatellama a su devolución de llamada una vez para cada elemento del conjunto al que llama animate:

Si se suministra, el start, step, progress, complete, done, fail, y alwaysdevoluciones de llamada se denominan en una base por elemento ...

Dado que está animando dos elementos (el htmlelemento y el bodyelemento), obtiene dos devoluciones de llamada. (Para cualquiera que se pregunte por qué el OP está animando dos elementos, es porque la animación funciona bodyen algunos navegadores pero htmlen otros navegadores).

Para obtener una única devolución de llamada cuando la animación esté completa, los animatedocumentos le indican que use el promisemétodo para obtener una promesa para la cola de animación, luego use thenpara poner en cola la devolución de llamada:

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

(Nota: Kevin B señaló esto en su respuesta cuando se hizo la pregunta por primera vez. No lo hice hasta cuatro años después, cuando noté que faltaba, lo agregué y ... luego vi la respuesta de Kevin. Por favor, dé su respuesta el amor se merece. Pensé que como esta es la respuesta aceptada, debería dejarla.)

Aquí hay un ejemplo que muestra tanto las devoluciones de llamada de elementos individuales como la devolución de llamada de finalización general:

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 obtener una única devolución de llamada para completar animaciones de varios elementos, use objetos diferidos.

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

Consulte la API de jQuery para obtener una descripción detallada de la promesa y los objetos diferidos .