使用 jquery 悬停事件

Posted 2023-05-08

【中文标题】使用 jquery 悬停事件

【英文标题】：Using jquery hover event

【发布时间】：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 是列表吗？

【参考方案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();
);