如果鼠标不悬停，则淡出元素

基本上我想淡出一个元素，如果在x秒后没有触发鼠标悬停事件。我试了几个小时，似乎无法编写代码来正常工作。如果鼠标不悬停，则淡出元素

到目前为止，我已经写了 -

$('.toolTip').live('mouseover', function() { 
    $(this).stop(true, true).fadeIn(); 
}); 
$('.toolTip').live('mouseleave', function() { 
    $(this).delay(4000).fadeOut("slow"); 
});

如果鼠标进入格，然后离开，但如果它没有以往任何时候都获得焦点其中一期工程。

来源

2012-08-10 Jordan Parker

一种方法是在另外添加一个fadeTo()命令你的鼠标悬停事件，以便它最初开始淡出：

$(".toolTip").delay(1000).fadeTo(5000, 0); 
$(".toolTip").on({ 
    mouseleave: function() { 
     $(this).delay(1000).fadeTo(5000, 0); 
    }, 
    mouseenter: function() { 
     $(this).stop().fadeTo(500, 1); 
    } 
});

DEMO

来源

2012-08-10 03:05:45

谢谢你，亚历克斯，我正在寻找！ – 2012-08-10 03:31:29

将永远不会在.toolTip div上调用mouseover事件，因为将通过将display:none应用于元素来完成，从而防止您再次将鼠标悬停在该元素上。您可以使用fadeTo（）来更改其不透明度，而不会影响其显示属性，而不是fadeOut（）。做到这一点

$(document).on('mouseover', '.toolTip', function() { 
    $(this).stop().fadeTo("fast", 1); 
}); 

$(document).on('mouseleave', '.toolTip', function() { 
    $(this).delay(4000).fadeTo("slow", 0); 
});

来源

2012-08-10 02:48:42

对不起德里克，我不要以为我解释得很好。如果鼠标**不输入工具提示元素将其淡出。但如果在淡出期间悬停，明显停止并将不透明度恢复为100％。 – 2012-08-10 02:58:32

够公平的，但我原来的陈述仍然存在。它不工作，因为fadeOut（）会完全隐藏它并阻止任何未来的鼠标悬停。不确定这与你接受的答案有什么不同。 – 2012-08-10 03:19:35

对不起，'$（“。toolTip”）。delay（1000）.fadeTo（5000，0）;'是我期望实现的，只是在一段时间内没有徘徊之后淡化一个元素或与之交互。我试图用计时器来触发，但显然这是一个愚蠢的错误。感谢您对'fadeOut（）'的建议！它的确解释了我的另一个愚蠢的错误！谢谢@Derek – 2012-08-10 03:29:12

如果鼠标不悬停，则淡出元素

回答

相关问题