Question

我目前正在尝试创建某种标签，当您将鼠标悬停在其上时会展开以向用户显示更多信息。我遇到的问题是，当用户多次快速盘旋在项目上时，事件队列会建立起来，因此动画会多次出现。

我希望当用户将鼠标悬停在标签上时，悬停事件将以某种方式被禁用，直到标签信息再次被隐藏。我尝试过使用.stop（）和event.stopPropagation（），但这些都没有达到预期的效果。有没有人有其他想法？

我的代码可以在下面看到......

$('.label').mouseenter(function(){
    $('.label-info').slideDown('slow');
});

$('.label').mouseleave(function(){
    $('.label-info').slideUp('slow');
})

提前感谢您的帮助。

Answer 1

使用.stop()：

http://api.jquery.com/stop/

描述：停止匹配元素上当前正在运行的动画。

所以你的代码应该是这样的：

$('.label')
.mouseenter(function(){
    $('.label-info').stop(1,1).slideDown('slow');
})
.mouseleave(function(){
    $('.label-info').stop(1,1).slideUp('slow');
})

请注意，如果您的目标是IE 7及以下版本，则仅使用类选择器是不明智的。

Answer 2

我已经遇到过这个问题几次了，并提出了各种方法来解决它。以下是您可以采取的两种方法来帮助解决这个问题。

选项1：过滤动画元素

使用:animated和.filter的组合，如果动画已经是动画中期，我们可以阻止动画发生。这意味着它会在向下滑动之前一直向上滑动。

$('.label').mouseenter(function()
{
    $('.label-info').filter(':animated').slideDown('slow');
}).mouseleave(function()
{
    $('.label-info').filter(':animated').slideUp('slow');
})

选项2 - hoverIntent插件

hoverIntent是一个不错的小jQuery插件，通过在触发悬停事件之前添加一个短暂的延迟来帮助防止意外杀死元素。它是一个非常有用的插件，不仅有助于解决这个问题，而且还有高度交互的DOM元素。

防止悬停队列建立

2 个答案:

选项1：过滤动画元素

选项2 - hoverIntent插件