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

Question

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

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

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

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

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

---

РЕДАКТИРОВАТЬ: Добавление кода по ссылке.

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

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

РЕДАКТИРОВАТЬ: Этот последний, кажется, работает.Истина / ложь переводится на 1/0.Вы также можете использовать .animate() напрямую.

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

Answer 2

с использованием .stop()

Answer 3

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

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