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方法停止动画，但这对相对值不起作用。您需要将它们更改为绝对值，这样您就不会将它们中途停止，然后将其设置为超过起始值。