¿Cómo detener todas las animaciones anteriores en Jquery antes de ejecutar una nueva?

Question

Estoy experimentando algo con JQuery.

tengo una imagen que se desvanece en otra imagen como ocurre mouseOver() y se desvanece de nuevo en mouseOut()

Funciona muy bien, excepto si se está moviendo el puntero del ratón sobre el enlace y otra vez, decir 5 veces, marchítase imagen entra y sale repetidamente, 5 veces mientras te sientas allí y esperas a que termine con este comportamiento loco.

Para detener este comportamiento, traté de usar una bandera y comenzar la animación SOLAMENTE si ya no está animando, pero, ¿adivina qué? Si, por ejemplo, tengo 4 de esos botones, y en cada botón mouseover me estoy desvaneciendoEn una imagen diferente, esa animación se ignorará ya que la bandera es falsa.

¿Hay alguna manera de detener todas las animaciones anteriores antes de ejecutar las nuevas? Estoy hablando de las funciones normales fadeIn() y slideDown() en jQuery

---

EDIT: Adición de código de enlace.

<a href="javascript:void(0);" onMouseOver="mouseOverOut(false);" onMouseOut="mouseOverOut(true);">Tick</a> 

Javascript

function mouseOverOut(t) 
{ 
    if(t) 
    { 
     $('.img1').fadeIn(); 
     $('.img2').fadeOut(); 
    } 
    else 
    { 
     $('.img1').fadeOut(); 
     $('.img2').fadeIn(); 
    } 
} 

Answer 1

Usando .stop() con fadeIn/Out puede causar la opacidad quede atascado en un estado parcial.

En su lugar, una solución es usar .fadeTo(), que proporciona un destino absoluto para la opacidad.

function mouseOverOut(t) { 
    if(t) { 
     $('.img1').stop().fadeTo(400, 1); 
     $('.img2').stop().fadeTo(400, 0); 
    } 
    else { 
     $('.img1').stop().fadeTo(400, 0); 
     $('.img2').stop().fadeTo(400, 1); 
    } 
} 

Aquí hay una forma más corta de escribirlo.

function mouseOverOut(t) { 
    $('.img1').stop().fadeTo(400, t ? 1 : 0); 
    $('.img2').stop().fadeTo(400, t ? 0 : 1); 
} 

O esto puede funcionar. Pruébalo primero, sin embargo.

function mouseOverOut(t) { 
    $('.img1').stop().fadeTo(400, t); 
    $('.img2').stop().fadeTo(400, !t); 
} 

EDIT: Esto último parece funcionar. El verdadero/falso se traduce a 1/0. También puede usar .animate() directamente.

function mouseOverOut(t) { 
    $('.img1').stop().animate({opacity: t}); 
    $('.img2').stop().animate({opacity: !t}); 
} 

Answer 2

¿Ya intenta stop()?

Descripción: Detenga la animación que se está ejecutando actualmente en los elementos coincidentes.

Answer 3

usando .stop()