JQuery Animate - 如何在悬停后立即停止悬停功能（不要完成悬停功能）

Posted 2023-05-08

【中文标题】JQuery Animate - 如何在悬停后立即停止悬停功能（不要完成悬停功能）

【英文标题】：JQuery Animate - How to stop hover-on function as soon as hovered-off (dont complete hover-on function)

【发布时间】：2011-12-22 08:44:28

【问题描述】：

我有一个菜单导航区域，我在其中使用 .animate 在文本悬停时将其滑过，然后在悬停时将其滑回。一旦鼠标悬停在选项卡上，我希望能够立即停止幻灯片动画。我该怎么做？

$('a.menu').hover(
    function()
        if(!$(this).hasClass('current'))
            $(this).animate('padding-right': '+=10');
    ,
    function()
        if(!$(this).hasClass('current'))
            $(this).animate('padding-right': '-=10');
           
);

【参考方案1】：

使用stop() 方法

$('a.menu').hover(
    function()
        if(!$(this).hasClass('current'))
            $(this).stop().animate('padding-right': '+=10');
    ,
    function()
        if(!$(this).hasClass('current'))
            $(this).stop().animate('padding-right': '-=10');
           
);

【讨论】：

好吧，这样的作品。唯一的问题是如果它在到达 +=10px 之前悬停，那么悬停功能仍然会删除 10px。 （即，如果文本达到 +6px 并且我悬停，悬停功能仍然向右移动 10px，而不是仅仅 6）

嗯...你还在做其他事情吗？因为padding:-n 被视为padding:0。 （CSS 中不能有负填充）。例如：jsfiddle.net/XFbf5

【参考方案2】：

您可以使用stop 方法来停止动画，但这不适用于相对值。您需要将它们更改为绝对值，这样您就不会中途停止它们，然后动画回到起始值。

【讨论】：

甜蜜！使用 .stop() 后，这纠正了我的第二个问题。谢谢！