代码之家 › 专栏 › 技术社区 › LocustHorde

如何在执行新动画之前停止jquery中以前的所有动画?

javascript-events jquery

7

LocustHorde · 技术社区 · 14 年前

我只是在用jquery做一些试验。

我有一个图像,它会变成另一个图像 mouseOver() 发生并淡入淡出 mouseOut()

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

为了阻止这种行为,我尝试使用一个标志,并且仅当动画还没有动画时才启动它,但是,猜猜怎么着?例如,如果我有4个这样的按钮,并且在每一个按钮鼠标上,当我淡入不同的图像时,该动画将被忽略,因为标志是假的。

那么,在执行新的动画之前,是否有一种方法可以停止所有以前的动画? 我说的是正常的 fadeIn() 和 slideDown() jquery中的函数

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

function mouseOverOut(t)
{
    if(t)
    {
        $('.img1').fadeIn();
        $('.img2').fadeOut();
    }
    else
    {
        $('.img1').fadeOut();
        $('.img2').fadeIn();
    } 
}

3 回复 | 直到 13 年前

1

9

user113716 14 年前

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

.animate()

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

2

1

Dr.Molle 14 年前

stop()

3

1

user372551 14 年前

.stop()