使用 jquery 悬停事件答案

【问题标题】：Using jquery hover event使用 jquery 悬停事件
【发布时间】：2011-08-24 22:36:23
【问题描述】：

我有一个 jquery 悬停事件，当您将鼠标悬停在元素上时会触发该事件。麻烦的是，如果您多次将鼠标悬停在元素上，它会将事件排入队列，有时会使元素闪烁好几分钟，这取决于您悬停在元素上和悬停在元素上的速度和时间。我想停止事件的传播，以便消除这种排队。

$('.pui-search-item').hover( function() {
        $(this).find('.pui-actions').show('fade');
    }, function(){
        $(this).find('.pui-actions').hide('fade');

    });

我该怎么做呢，我尝试了各种传播功能都没有效果。

提前致谢。

【问题讨论】：

pui-search-item 是列表吗？

标签： jquery hover jquery-hover

【解决方案1】：

试试这个：

$('.pui-search-item').hover( function() {
        $(this).find('.pui-actions').stop(true, true).show('fade');
    }, function(){
        $(this).find('.pui-actions').stop(true, true).hide('fade');

    });

这里有更多关于 stop() http://api.jquery.com/stop/的信息

【讨论】：

【解决方案2】：

在动画之前添加一个stop(true)函数调用，所以它会重置队列。

【讨论】：

天才 - 谢谢 - 现在已修复：$(this).find('.pui-actions').stop(true,true).show('fade');
@Haraldo 记得第二个参数控制是否跳转。就我个人而言，我会将其保留为 false，以便它从当前的不透明度开始显示或隐藏。
这是否比使用 hoverIntent 插件或设置和间隔更坚实和流畅？
@easwee 这当然更容易，如果看起来差不多，我会坚持下去。我从来没有使用过插件。

【解决方案3】：

试试this链接。

您的实施应更改为：

$('.pui-search-item').hover(function() {
  $(this).find('.pui-actions').stop(true, true).fadeOut();
}, function() {
  $(this).find('.pui-actions').stop(true, true).fadeIn();
});

【讨论】：