关于 mouseover 和 mouseleave 重复功能？答案

【问题标题】：On mouseover and mouseleave repeating function?关于 mouseover 和 mouseleave 重复功能？
【发布时间】：2013-02-14 14:39:06
【问题描述】：

我有一个函数正在尝试编写，它在悬停时显示工具提示并在 mouseleave 上淡出：

$('.tt').mouseover(function(e) { 
    var tip = $(this).find('.tooltip');              
    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.fadeIn('500');
}).mouseout(function(e) {
    var tip = $(this).find('.tooltip');
    tip.fadeOut('500'); 
});

如果用户使用鼠标不稳定并多次悬停，则工具提示实质上会闪烁。有什么办法可以防止这种情况发生吗？

【问题讨论】：

1 分钟 10 个答案...我们是一群秃鹰。

标签： javascript jquery

【解决方案1】：

您正在寻找.stop( [clearQueue ] [, jumpToEnd ] )。

tip.stop(true, true).fadeIn(500);
tip.stop(true, true).fadeOut(500);

您可以了解更多关于.stop()here的信息。

【讨论】：

我不是 OP，但我最喜欢你的。感谢您发布 API 链接并提供可选参数。
这不是要走的路，还有其他事情你应该知道。更快的鼠标移动效果几乎是平滑的jsbin.com/araqiv/3/edit
我一半同意@roXon。这确实符合 OP 的要求。它可以防止非常流行的 jQuery 动画堆叠动画（这让人们经常会犯错），但它确实有些不稳定。然而，这可能是开发人员所追求的。与 roXon 指出的可以说是正确的方式相比，它对鼠标动作的反应更灵敏。我认为这两种方法都有效，但我认为我赞成 roXon 指出的技术上正确的方法。
@JosephMarikle 感谢您的理解，看到被否决我只是有点困惑，但事实上，寻找类似问题的新 SO 用户/访问者总是优先考虑 @987654326 @答案。

【解决方案2】：

添加 stop() - http://api.jquery.com/stop/

$('.tt').mouseover(function(e) { 

    var tip = $(this).find('.tooltip');

    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.stop().fadeIn(500);

}).mouseout(function(e) {

    var tip = $(this).find('.tooltip');
    tip.stop().fadeOut(500);

});

【讨论】：

.stop() 在您的情况下将完成部分工作。关于如何获得最佳结果还有其他事情。这是您提供的答案的演示：jsbin.com/araqiv/2/edit 我不建议这样做
为什么不呢？您将如何改进？
改进？您不能使用fadeIn('500')，而是使用fadeIn(500)，而不是mouseover 和mouseout 不适合，但您应该知道这一点。这是我的改进，但它实际上完全反映了我的答案：jsbin.com/araqiv/4/edit。因此，您的示例不仅不会顺利进行，而且也是错误的。（并且有 2 个赞成票...）
我只是复制了OP的代码并添加了stop()，我没有更正他的代码。所以我的回答是正确的，我只是没能修复他的语法。我已经编辑了我的答案以解决语法问题。如果您担心 2 票赞成，那么您应该酌情反对。

【解决方案3】：

使用tip.stop().fadeIn() 和tip.stop().fadeOut()

【讨论】：

【解决方案4】：

这可能有效，请尝试使用 .stop()

 tip.stop().fadeOut('500');

【讨论】：

【解决方案5】：

您可能想查看HoverIntent 插件。

它旨在防止其中一些抖动。

Ben Alman 在Throttling and Debouncing 上的文章也很有趣。

【讨论】：

【解决方案6】：

尝试实际进入/离开 - 如果提示位于显示提示时 .tt 失去焦点的位置，则可能不起作用。

添加一个停靠点，将 css 简化为一个对象。

$('.tt').mousenter(function(e) { 
    var tip = $(this).find('.tooltip');
    //Set the X and Y axis of the tooltip
    tip.css({'top':0,'right': -200});
    tip.stop().fadeIn('500');
}).mouseleave(function(e) {
   $(this).find('.tooltip').stop().fadeOut('500');
});

【讨论】：

【解决方案7】：

LIVE DEMO

当然，使用.stop() 方法和mouseenter mouseleave

$('.tt').on('mouseenter mouseleave', function( e ) { 

    var elOpacity = e.type=='mouseenter' ? 1 : 0 ;
    var $tip = $(this).find('.tooltip');

    $('.tooltip').css({top: 0, right: -200 });
    $tip.stop().fadeTo(500, elOpacity);

});

上面示例中的.on() 方法允许您创建我们感兴趣的事件的“列表”，
比在条件运算符 (Ternary (?:) ) 中，我们侦听 e (event) 的变化，并为元素不透明度赋值一个值，将其传递给 .fadeTo()动画方法。
.stop() 将结束前一个动画而不创建动画构建。

【讨论】：

添加了一个演示，只为了不起的@downvoter 他不在乎解释他的行为。
大声笑的人会讨厌。抱歉，您的回答被否决了，兄弟。感谢您的帮助。希望它能获得足够多的支持，让未来的观众更容易看到。