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

【问题标题】：How to stop all previous animations in Jquery before executing new one?如何在执行新动画之前停止 Jquery 中所有以前的动画？
【发布时间】：2010-11-04 11:53:21
【问题描述】：

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

当mouseOver() 出现并在mouseOut() 上淡出时，我有一个图像会淡入另一个图像

效果很好，除非您一次又一次地将鼠标移到链接上，比如说 5 次，图像会反复淡入淡出，5 次，而您只是坐在那里等待它结束这种疯狂行为。

为了阻止这种行为，我尝试使用标志并仅在动画尚未动画时才开始动画，但是，你猜怎么着？例如，如果我有 4 个这样的按钮，并且在每个按钮鼠标悬停时，我正在淡入不同的图像，则该动画将被忽略，因为标志为 false。

那么有没有办法在执行新动画之前停止所有以前的动画？我说的是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();
    } 
}

【问题讨论】：

@patrick grrrrrrr 你暴露了我幼稚的函数命名习惯！

标签： jquery javascript-events

【解决方案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});
}

【讨论】：

使用stop()的goToEnd-argument应该可以避免这种情况。
@Dr.Molle - 是的，这是一个选项，但在我看来效果更不和谐。
当然，如果动画能像你建议的那样顺利结束，它看起来会更好:)
在你给出这个答案 2 年后，仍然有人（嗯..我）在使用它！干杯！

【解决方案2】：

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

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

【讨论】：

没有，我没试过stop，是独立的功能吗？我应该像stop() 这样称呼它吗？现在将尝试这个并报告，谢谢

【解决方案3】：

使用.stop()

【讨论】：