javascript - animate - jQuery: interrumpir fadeIn()/fadeOut()

slideup jquery

Question

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

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

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

Answer 1

Obtendrá un efecto suave de entrada / salida al borrar la cola pero sin saltar al 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 una solución alternativa ... use FadeTo en su lugar, funciona en objetos ocultos y parcialmente descoloridos:

    $(''.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 2

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>

Answer 3

Puede utilizar 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 que tratan con una animación, etc. dentro de la devolución de llamada de la función. Puede saber si el fadeIn () ha terminado haciendo su función desde su devolución de llamada, como:

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

Si eso no es posible, puede declarar una variable fuera de la función. Por ejemplo, var elmFadeInRunning = false. Cámbielo a verdadero justo antes de llamar a fadeIn y cámbielo de nuevo a falso en la devolución de llamada del fadeIn. De esa manera, puedes saber si todavía se está ejecutando si elmFadeInRunning == true.

Answer 5

Trate de sacar la animación de la cola.

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

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

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

Answer 6

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

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

Answer 7

AFAIK fadeIn y fadeOut ejecutan de forma síncrona, así que no, no creo que puedas interrumpirlos mientras se ejecutan. Tendrías que esperar hasta que se termine de ejecutar.

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