¿Cómo puedo detener todas las animaciones de jQuery?

Question

Voy a tener casos en los que deba pausar todas las animaciones en la página para hacer alguna interacción con el usuario, y luego reanudar todas las animaciones tan pronto como el usuario haya respondido.

Por ejemplo, podría tener una animación que se está desvaneciendo durante un período de 1 s, y 400ms en la que necesito detenerla. Debería detenerse en un 40% de opacidad, y permanecer allí hasta que reanude, momento en el que debería continuar donde lo dejó y pasar otros 600 ms completando su fundido de entrada del 40% al 100%.

Puede haber varias animaciones en la página simultáneamente, y quiero pausarlas todas. Además, algunas animaciones pueden tener más animaciones en cola para continuar después de que se completen, y que todo debe funcionar: cuando reanude, la animación actual debe finalizar, y luego la siguiente en la cola debe comenzar, como si nada hubiera sucedido. .

jQuery no parece tener ningún soporte incorporado para pausar animaciones; lo más cercano que puedo encontrar es .stop(), que se detendrá en el lugar actual de la animación, pero no puede reanudarse más tarde; y pasa a la siguiente animación en la cola inmediatamente o borra la cola de animación por completo.

¿Cómo puedo pausar las animaciones de una manera que me permita reanudarlas más tarde?

Answer 1

Pausa/Reanudar Opción

El pause plugin va a funcionar bien para esta situación.

HTML

<div class=demo> 
    <div id="box1" class="animationToPause"></div> 
    <div id="box2" class="animationToPause"></div> 
    <div id="box3" class="animationToPause"></div> 
</div> 
<input id="btnPause" type="button" value="Pause Animations" /> 

CSS

div.demo { 
    border: 1px solid #555; 
    margin: 1em auto; 
    width: 550px; 
} 
#box1, #box2, #box3 { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
#box1 { 
    background: #0C0; 
} 
#box2 { 
    background: #090; 
} 
#box3 { 
    background: #060; 
}​ 

JavaScript

$(function() { 
    //Begin animation on boxes 
    $("div[id^='box']").each(function() { 
     phase1($(this)); 
    }); 

    //Setup animation pause/resume on hover 
    $("div[id^='box']").hover(function() { 
     $(this).pause(); 
    }, function() { 
     $(this).resume(); 
    }); 
}); 

//Toggle animation pause/resume on button click 
$("#btnPause").toggle(
    function() { 
     $(".animationToPause").pause(); 
    }, function() { 
     $(".animationToPause").resume() 
}); 

//Animation 1 
function phase1($this) { 
    $this.animate({ 
     left: 450 
    }, 2000, 'swing', function() { 
     phase2($this) 
    }); 
} 

//Animation 2 
function phase2($this) { 
    $this.animate({ 
     left: 0 
    }, 2000, 'swing', function() { 
     phase1($this) 
    }); 
}​ 

Aquí es a working fiddle to demonstrate.

Opción fuerza bruta

Ciertamente no es lo que está buscando, pero relacionado.

Configuración jQuery.fx.off = true; detendrá todas las animaciones inmediatamente.