如何在jQuery中停止所有以前的动画，然后再执行新的动画？

7gyucuyw 于 2022-12-03 发布在 jQuery

关注(0)|答案(3)|浏览(164)

我只是在用jQuery做一些实验。
我有一个图像，当mouseOver()发生时，它会淡入另一个图像，当mouseOut()发生时，它又会淡入
它的工作很好，除了如果你是移动你的鼠标在链接上一次又一次，说5次，图像淡入淡出反复，5次，而你只是坐在那里，等待它得到了这种疯狂的行为。
为了阻止这种行为，我尝试使用一个标志，并启动动画，只有当它还没有动画，但是，你猜怎么着？如果，比方说，我有4个这样的按钮，并且在每个按钮鼠标悬停时，我在一个不同的图像中淡出，该动画将被忽略，因为标志是假的。
那么，有没有办法在执行新动画之前停止之前的所有动画呢？

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

jquery

来源：https://stackoverflow.com/questions/4096357/how-to-stop-all-previous-animations-in-jquery-before-executing-new-one

3条答案

按热度按时间

waxmsbnn1#

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

赞(0）回复(0）举报 2022-12-03

aij0ehis2#

您是否已经尝试过stop()？

***说明：*停止匹配元素上当前正在运行的动画。

赞(0）回复(0）举报 2022-12-03

ie3xauqp3#

使用.stop()

赞(0）回复(0）举报 2022-12-03

我来回答

如何在jQuery中停止所有以前的动画，然后再执行新的动画？

3条答案

相关问题

热门标签

最新问答