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 - 一个布尔值，指示是否也删除排队的动画。默认为false。

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

jQuery重复悬停效果

1 个答案: