Как остановить все предыдущие анимации в JQuery перед выполнением нового?

Question

Я просто экспериментирую с JQuery.

У меня есть изображение, которое исчезает в другое изображение, как mouseOver() происходит и затухает обратно на mouseOut()

Он отлично работает, за исключением, если вы перемещение мыши по ссылке, снова и снова, скажем, 5 раз, изображение выцветает много раз, в 5 раз, пока вы просто сидите там и ждете, пока он перейдет с этим сумасшедшим поведением.

Чтобы остановить это поведение, я попытался использовать флаг и начать анимацию ТОЛЬКО, если он уже не анимируется, но, угадайте, что? Если, скажем, у меня есть 4 таких кнопки, и на каждой кнопке мыши я fadingIn другого изображения, эта анимация будет проигнорирована, так как флаг является ложным.

так Есть ли способ остановить все предыдущие анимации перед выполнением новых? Я говорю о нормальных fadeIn() и slideDown() функций в JQuery

---

EDIT: Добавление кода из ссылки.

<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

Использование .stop() с fadeIn/Out может вызвать помутнение застрять в состоянии частичного.

Одно из решений заключается в использовании .fadeTo() вместо этого, что дает абсолютное место для непрозрачности.

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

Вот более короткий способ его написания.

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

Или это может сработать. Сначала проверьте это.

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

EDIT: Это последний, кажется, работает. Истина/ложь переводится в 1/0. Вы также можете напрямую использовать .animate().

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

Answer 2

Вы уже попробовать stop()?

Описание: Остановить текущую анимацию на согласованных элементах.

Answer 3

с помощью .stop()