Question

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

如果用户使用鼠标变得不稳定并且多次徘徊，则工具提示基本上会闪烁。有没有办法阻止这个？

Answer 1

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

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

您可以详细了解.stop() here。

Answer 2

添加停止（） - 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);

});

Answer 3

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

Answer 4

这可能有用，请尝试使用.stop（）

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

Answer 5

您可能想查看HoverIntent插件。

它旨在防止一些这些紧张。

Ben Alman关于Throttling and Debouncing的文章也引起了人们的兴趣。

Answer 6

的 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()方法允许您创建我们感兴趣的事件的“列表”，
在条件运算符（三元 (?:)）内，我们会监听e（事件）更改，并为传递它的元素不透明度赋值到.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

Answer 7

尝试实际的输入/离开 - 如果提示是在显示提示时.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 个答案: