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

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

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

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

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

итак, есть ли способ остановить все предыдущие анимации перед выполнением новых? Я говорю о нормальном 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();
    } 
}
7
javascript-events jquery

3 ответов

используя .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: этот последний, кажется, работает. Значение true / false переводится на 1/0. Вы также можете использовать .animate() непосредственно.

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

вы уже пробовали stop () ?

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

1

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

1