jQuery: interruzione di fadeIn()/fadeOut()

Question

Diciamo che ho chiamato $ element.fadeIn (200). 100 ms dopo, qualcosa accade su quella pagina e voglio interrompere quella dissolvenza e immediatamente fadeOut(). Come posso fare questo?

Se chiamate call $ element.fadeIn (200) .fadeOut (0), il fadeOut() si verifica solo dopo che il fadeIn() ha terminato.

Inoltre, c'è un modo per esaminare $ elemento per determinare se un fadeIn() o fadeOut() è in esecuzione? L'elemento $ ha un membro .data() che cambia?

Answer 1

Provare a interrompere l'animazione dalla coda.

$('...').fadeIn(200).dequeue().fadeOut(0); 

http://api.jquery.com/queue/

http://api.jquery.com/dequeue/

Answer 2

quanto ne sappia fadeIn e fadeOut eseguire in modo sincrono, quindi no, non credo che si può interrompere la loro mentre sono in esecuzione. Dovresti aspettare fino a quando non si esegue l'esecuzione.

Se si chiama il metodo stop sull'elemento, verranno interrotte tutte le animazioni. Il motivo per cui la chiamata fadeOut nell'esempio non viene chiamata fino a dopo il fadeIn perché le animazioni vengono eseguite in modo simile alla coda.

Answer 3

È possibile utilizzare la funzione stop() per interrompere qualsiasi animazione che si verifica durante quel particolare momento. Fammi sapere se funziona.

Answer 4

È sempre una buona pratica mantenere le funzioni che si occupano di un'animazione ecc all'interno del callback della funzione. Si può dire se il fadeIn() ha terminato facendo la funzione dall'interno di un callback, come:

$element.fadeIn(200, function(){ 
    //do callback 
}); 

Se questo non è possibile, allora si può dichiarare una variabile al di fuori della funzione. Supponi, var elmFadeInRunning = false. Cambialo in vero a destra prima di chiamare fadeIn e cambiarlo nuovamente in false nel callback di fadeIn. In questo modo puoi sapere se è ancora in esecuzione se elmFadeInRunning == true.

Answer 5

stop() rimuoverà solo le animazioni che non sono state ancora eseguite.

utilizzare stop(true, true) per interrompere e rimuovere anche l'animazione corrente!

Answer 6

Si otterrà un effetto di dissolvenza/dissolvenza eliminando la coda, ma non saltando fino alla fine, usando .stop (true, false), ma si noti che poiché FadeIn può essere interrotto in questo modo, FadeOut non può. L'ho segnalato come un bug come anni fa, ma a nessuno importava. FadeIn funziona solo se l'oggetto è nascosto. Ma c'è soluzione ... usare FadeTo invece - funziona su nascoste così come gli oggetti in parte sbiadito:

$('.a').hover(function(){ 
    $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!) 
},function(){ 
    $('.b').stop(true,false).fadeOut(3000); 
}); 

Ecco come funziona: http://jsfiddle.net/dJEmB/

Answer 7

Un altro esempio di lavoro

<div id="fadediv">Yay, I like to fade</div> 
<button id="stopdatfade" >Stop that fade!</button> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script> 
(function($){ 

    currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000); 
    $('#stopdatfade').on('click', function() { 
     if (typeof currentfade !== 'undefined') { 

      currentfade.stop(true, true); 

     } 

    }); 
})(jQuery); 
</script>