1

我有一个函数正在尝试编写，它在悬停时显示工具提示并在 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'); 
});

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

4

7 回答 7

4

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

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

.stop() 您可以在此处了解更多信息。

于 2013-02-14T14:43:23.970 回答
3

添加 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);

});
于 2013-02-14T14:42:17.857 回答
2

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

于 2013-02-14T14:42:17.123 回答
1

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

 tip.stop().fadeOut('500');
于 2013-02-14T14:42:31.660 回答
0

您可能想查看HoverIntent插件。

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

Ben Alman 关于节流和去抖动的文章也很有趣。

于 2013-02-14T14:43:02.177 回答
0

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()将结束前一个动画而不创建动画构建。

阅读更多： http: //api.jquery.com/stop/
http://api.jquery.com/fadeto/
http://api.jquery.com/on/
http://api.jquery.com/mouseenter
/
http://api.jquery.com/mouseleave/
另外探索：
http ://api.jquery.com/hover/
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/ Conditional_Operator

于 2013-02-14T14:43:36.387 回答
0

尝试实际的进入/离开 - 如果提示位于显示提示时 .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');
});
于 2013-02-14T14:44:37.210 回答