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

我只是在尝试使用 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();
    } 
}

解决方法

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

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

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

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

解决方法

猜你在找的jQuery相关文章