如何在执行新的动画之前停止Jquery中的所有先前动画？

Question

我只是在尝试使用JQuery.

我有一个图像,它会逐渐淡入另一个图像mouseOver()并逐渐消失mouseOut()

它工作得很好,除非你将鼠标一次又一次地移动到链接上,说5次,图像反复淡入淡出,5次,而你只是坐在那里等待它克服这种疯狂的行为.

为了阻止这种行为,我试图使用一个标志并仅在它尚未动画时启动动画,但是,你猜怎么着？例如,如果我有4个这样的按钮,并且在每个按钮鼠标悬停上我正在淡化在不同的图像中,该动画将被忽略,因为该标志是假的.

那么有没有办法在执行新动画之前停止所有以前的动画？我在谈论JQuery中的常规fadeIn()和slideDown()函数

---

编辑:从链接添加代码.

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

编辑:这最后一个似乎工作.true/false转换为1/0.你也可以.animate()直接使用.

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