Jak zatrzymać wszystkie poprzednie animacje w Jquery przed wykonaniem nowego?

Question

Po prostu eksperymentuję z JQuery.

Mam obrazu, który zanika do innego obrazu jako mouseOver() pojawia i zanika z powrotem na mouseOut()

Działa świetnie, chyba że jesteś w ruchu myszką link jeszcze raz i jeszcze raz, powiedzmy 5 razy, zanika obraz wchodzić i wychodzić wielokrotnie, 5 razy, podczas gdy po prostu siedzisz i czekasz, aż to się skończy z tym szalonym zachowaniem.

Aby zatrzymać to zachowanie, próbowałem użyć flagi i uruchomić animację TYLKO, jeśli nie jest ona już animowana, ale zgadnij co? Jeśli, powiedzmy, mam 4 takie przyciski, a na każdym z nich kliknięcie myszki przygaśnie W innym obrazie, ta animacja zostanie zignorowana, ponieważ flaga jest fałszywa.

czyli Czy istnieje sposób zatrzymania wszystkich poprzednich animacji przed wykonaniem nowych? mówię o normalnych fadeIn() i slideDown() funkcji w JQuery

---

EDIT: Dodawanie kodu z linku.

<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

Korzystanie .stop() z fadeIn/Out może spowodować zmętnienie utknąć w stanie częściowego.

Jednym rozwiązaniem jest użycie .fadeTo() zamiast tego, co daje bezwzględne miejsce docelowe dla krycia.

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

Oto krótszy sposób jego napisania.

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

Lub to może działać. Ale najpierw przetestuj to.

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

EDYCJA: Ten ostatni wydaje się działać. Wartość true/false jest tłumaczona na 1/0. Możesz również użyć bezpośrednio numeru .animate().

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

Answer 2

Czy już próbować stop()?

Opis: Zatrzymaj aktualnie uruchomioną animację na dopasowanych elementach.

Answer 3

użyciu .stop()