如果动画在jQuery中停止，如何防止回调？

Posted 2023-05-08

【中文标题】如果动画在jQuery中停止，如何防止回调？

【英文标题】：How to prevent callback if animation is stopped in jQuery?

【发布时间】：2011-11-18 13:03:33

【问题描述】：

我正在开发一个包含大量可悬停 div 的项目。我写了一个动画来做到这一点：

鼠标悬停时，图像淡出，作为回调，包含信息的 div 淡入。然后在鼠标移出时，信息 div 淡出，作为回调，图像淡入。我正在使用 hoverIntent插件。

我的问题是，如果您在 div 上停留的时间足够长，一切都会正常工作。但是如果你在它上面停留 300 毫秒，动画就会停止，但是仍然会调用显示信息 div 的回调，忽略鼠标移出事件。这会导致 info div 永久保留...

这是我的代码：

 var infoPaneSettings = 
    sensitivity: 3,
    interval: 200,
    timeout: 500,
    over: showPane,
    out: hidePane

       

function showPane() 
    var entry = $(this);
    $('.featured_img', entry).fadeTo(1000, 0, 
        function()
        $('.infoPane', entry).fadeTo(200, 1);
        );




function hidePane() 
    var entry = $(this);
    $('.infoPane', entry).fadeTo(300, 0, 
        function()
        $('.featured_img', entry).fadeTo(200, 1);
        );


$('.entry').each(function()
    $(this).hoverIntent(infoPaneSettings);
);

希望你能帮帮我！

【参考方案1】：

在开始新动画之前在元素上使用http://api.jquery.com/stop/。它将阻止运行回调。

【讨论】：

我已经尝试在每个.fadeTo() 之前添加一个.stop()，但它会停止一切并且不会启动鼠标移出动画...我做错了吗？那我应该把它放在哪里？非常感谢！

你可以在调用中使用两个布尔值，一个表示是否清除动画队列，一个跳到队列的末尾 - $('elem').stop(true,真的）;将终止队列并跳到最后，阻止任何进一步的动画

谢谢，我写的是.stop(true, true)，应该是.stop(true, false)。现在可以正常使用了，再次感谢！