jQuery: interrumpir fadeIn()/fadeOut()

Question

Digamos que he llamado $ element.fadeIn (200). 100 ms después, sucede algo en esa página y quiero interrumpir ese fade e inmediatamente fadeOut(). ¿Cómo puedo hacer esto?

Si llamas a llamar $ element.fadeIn (200) .fadeOut (0), el fadeOut() solo ocurre después de que fadeIn() haya finalizado.

Además, ¿hay alguna manera de que pueda examinar $ element para determinar si se está ejecutando un fadeIn() o fadeOut()? ¿$ Elemento tiene algún miembro .data() que cambie?

Answer 1

Intenta sacar la animación de la cola.

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

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

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

Answer 2

yo sepa fadeIn y fadeOut plazo de forma sincrónica, así que no, no creo que pueda interrumpirlos mientras se están ejecutando. Tendría que esperar hasta que se termine de ejecutar.

Si llama al método stop en el elemento, se detendrán todas las animaciones. La razón por la cual la llamada fadeOut en su ejemplo no se llama hasta después de fadeIn es porque las animaciones se ejecutan en forma de fila.

Answer 3

Puede usar la función stop() para interrumpir cualquier animación que tenga lugar durante ese momento en particular. Hazme saber si esto funciona.

Answer 4

Siempre es una buena práctica mantener las funciones relacionadas con una animación, etc. dentro de la devolución de llamada de la función. Se puede decir que si el fadeIn() ha terminado por hacer su función desde dentro de su devolución de llamada, como:

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

Si eso no es posible, entonces se puede declarar una variable fuera de la función. Diga, var elmFadeInRunning = falso. Cámbielo a verdadero justo antes de llamar a fadeIn y cámbielo a false en la devolución de llamada de fadeIn. De esta forma, puede saber si todavía está ejecutándose si elmFadeInRunning == true.

Answer 5

stop() solo eliminará las animaciones que aún no se hayan ejecutado.

¡utilice stop(true, true) para interrumpir y eliminar la animación actual también!

Answer 6

Obtendrá un efecto de fundido de entrada/salida suave al borrar la cola pero no saltará hasta el final, usando .stop (verdadero, falso), pero tenga en cuenta que como FadeIn puede interrumpirse de esta manera, FadeOut no puede. Lo reporté como un error como hace años, pero a nadie le importaba. FadeIn solo funciona si el objeto está oculto. Pero hay solución ... fadeTo utilizar en su lugar - que funciona en objetos parcialmente ocultos descoloridos, así como:

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

Así es como funciona: http://jsfiddle.net/dJEmB/

Answer 7

Otro ejemplo de trabajo

<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>