color - jquery animate then

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

Question

Desde que agregué algunos scrollTop -animation, algunas partes de mi callback 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);                    
        });
    });
});

Parece que solo repite .show() , al menos no tengo la impresión de que load() o .fadeIn() se .fadeIn() segunda vez. El .show() se repite tan pronto como termina por primera vez. Establecer la velocidad de animación scrollTop en 0 no ayudó por cierto!

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

Answer 1

Para obtener una devolución de llamada única para la finalización de animaciones de elementos múltiples, 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 los objetos promise y Diferida .

Answer 2

animate llamadas animate devuelven la devolución de llamada una vez por cada elemento del conjunto al que llamas animate :

Si se proporciona, las llamadas de start , step , progress , complete , done , fail y always invocan por elemento ...

Como estás animando dos elementos (el elemento html y el elemento body ), obtienes dos devoluciones de llamada. (Para cualquiera que se pregunte por qué el OP está animando dos elementos, es porque la animación funciona en el body en algunos navegadores pero en html en otros navegadores).

Para obtener una devolución de llamada única cuando se completa la animación, los documentos animate indican que use el método de promise para obtener una promesa para la cola de animación, y luego usarla then 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 formuló la pregunta por primera vez. No lo hice hasta cuatro años más tarde cuando noté que faltaba, la agregué y ... luego vi la respuesta de Kevin. Responda la respuesta Merece la pena. Me di cuenta de que como esta es la respuesta aceptada, debería dejarla en.)

Aquí hay un ejemplo que muestra las devoluciones de llamadas de los elementos individuales y la devolución de llamada completa completa:

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>