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

Question

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

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

Answer 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'});
    }       
);

Answer 2

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