Come posso mettere in pausa tutte le animazioni jQuery?

Question

Avrò casi in cui ho bisogno di mettere in pausa tutte le animazioni sulla pagina per fare qualche interazione con l'utente, e quindi riprendere tutte le animazioni non appena l'utente ha risposto.

Ad esempio, potrei avere un'animazione che sta svanendo in un periodo di 1 s, e 400 ms in Ho bisogno di metterla in pausa. Dovrebbe fermarsi al 40% di opacità e rimanere lì fino a quando non riprendo, a quel punto dovrebbe riprendere da dove era stato interrotto e passare altri 600ms completando la sua dissolvenza dal 40% al 100%.

Ci potrebbero essere più animazioni sulla pagina contemporaneamente e voglio metterle in pausa tutte. Inoltre, alcune animazioni potrebbero avere ulteriori animazioni in coda per continuare dopo il loro completamento e che tutto deve funzionare: quando riprendo, l'animazione corrente deve terminare, e quindi deve essere avviato quello successivo nella coda, proprio come se non fosse successo nulla .

jQuery non sembra avere alcun supporto integrato per sospendere le animazioni; il più vicino che riesco a trovare è .stop(), che si fermerà nel punto corrente dell'animazione, ma non può riprendere più tardi; e passa immediatamente alla successiva animazione in coda o cancella completamente la coda di animazione.

Come posso sospendere le animazioni in un modo che consenta di riprenderle in un secondo momento?

Answer 1

Pausa/Riprendi Opzione

Il pause plugin funzionerà bene per questa situazione.

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) 
    }); 
}​ 

Ecco a working fiddle to demonstrate.

Brute Force Opzione

Certamente non è quello che stai cercando, ma correlati.

L'impostazione jQuery.fx.off = true; interromperà immediatamente tutte le animazioni.