Comment arrêter toutes les animations précédentes dans Jquery avant d'en exécuter une nouvelle?

Question

Je suis en train d'expérimenter quelque chose avec JQuery.

J'ai une image qui se fond dans une autre image que mouseOver() se produit et esquives sur mouseOut()

Il fonctionne très bien, sauf si vous déplacez votre souris sur le lien encore et encore, disons 5 fois, les fondus d'image dans et dehors à plusieurs reprises, 5 fois pendant que vous vous asseyez juste là et attendez qu'il se termine avec ce comportement fou.

Pour arrêter ce comportement, j'ai essayé d'utiliser un drapeau et de démarrer l'animation SEULEMENT si elle n'est pas déjà animée, mais, devinez quoi? Si, disons, j'ai 4 boutons de ce type, et sur chaque bouton mouseover je suis en train de fondre Dans une image différente, cette animation sera ignorée puisque le drapeau est faux. Y at-il un moyen d'arrêter toutes les animations précédentes avant d'en exécuter de nouvelles? Je parle des fadeIn() et slideDown() fonctions normales dans JQuery

---

EDIT: Ajout de code de lien.

<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

En utilisant .stop() avec fadeIn/Out peut provoquer l'opacité à se coincer dans un état partiel.

Une solution consiste à utiliser .fadeTo() à la place, ce qui donne une destination absolue pour l'opacité.

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

Voici une façon plus courte de l'écrire.

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

Ou cela peut fonctionner. Testez-le d'abord, cependant.

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

EDIT: Ce dernier semble fonctionner. Le vrai/faux est traduit en 1/0. Vous pouvez également utiliser .animate() directement.

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

Answer 2

vous avez essayé déjà stop()?

Description: Arrête l'animation en cours sur les éléments correspondants.

Answer 3

utilisant .stop()