0

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

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

我的代码如下所示：

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

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

2 回答 2

2

使用.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 及更低版本，则仅使用类选择器是不明智的。

于 2012-06-06T08:48:56.167 回答
0

我遇到过几次这个问题，并想出了各种方法来解决它。这里只有 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 元素。

于 2012-06-06T08:55:23.160 回答