jQuery 重复悬停效果

Question

每当我将鼠标滑过下面代码中的每个链接几次时，我都会遇到这个奇怪的问题，该链接将持续悬停效果太长时间，并重复应用它。我拥有它，以便 jquery 在将鼠标悬停在其上方时更改其类，以便突出显示鼠标所在的类。

<ul>        
    <li><a href="#" class="current">Home</a></li>       
    <li><a href="#" class="hover">News</a></li>     
    <li><a href="#" class="hover">Media</a></li>    
    <li><a href="#" class="hover">About</a></li>
</ul>

这是 jquery 代码:

$(document).ready(function() {
    $('.hover').hover(function() {
        $(this).switchClass('hover', 'hover-on', 250);
    }, function() {
        $(this).switchClass('hover-on', 'hover', 250);
    });
})

CSS 类只包含不同的背景颜色。

尝试下面的链接看看我的意思，我不知道如何描述这种行为。将鼠标悬停在上面几次，只需将鼠标在每个链接上来回移动几次即可。 http://74.63.212.104/nav/

Answer 1

实现 jQuery .stop()在开始动画之前，请清除该元素的动画队列中剩余的任何内容。

$(document).ready(function() {
    $('.hover').hover(function() {
        $(this).stop(true, false).switchClass('hover', 'hover-on', 250);
    }, function() {
        $(this).stop(true, false).switchClass('hover-on', 'hover', 250);
    });
});

编辑:

.stop()参数说明

.stop( [clearQueue] [, JumpToEnd] )

clearQueue - 一个 bool 值，指示是否也删除排队的动画。默认为 false。

jumpToEnd - 一个 bool 值，指示是否立即完成当前动画。默认为 false。