我需要做一件事。 我在网站上有元素。当用户将鼠标悬停在此项目上时,我需要显示警报。但是有延迟:当用户将鼠标悬停在项目上并且一秒钟鼠标仍在项目上时,将显示警报。我可以这样做,但是我想在鼠标离开相同的项目时做同样的事情(当鼠标离开项目和一秒钟之后仍然在项目之外)。现在我使用这段代码,但当然它离开了
$('.test').hover(function(){
mytimeout = setTimeout(function(){
alert("enter");
}, 1000);
}, function(){
clearTimeout(mytimeout);
});
$('.test').mouseleave(function() {
alert("escape");
});
当然我不会在警报中使用它;) 我不知道该怎么做。悬停在悬停?还是用别的东西? 感谢您的帮助,对不起我的英语。
答案 0 :(得分:2)
你需要在两个区块中超时,进入/离开,如下所示:
var $demo = $("#demo");
var timer;
$('.test').hover(function() {
//Clear timeout just in case you hover-in again within the time specified in hover-out
clearTimeout(timer);
timer = setTimeout(function() {
$demo.text("enter");
}, 1000);
}, function() {
//Clear the timeout set in hover-in
clearTimeout(timer);
timer = setTimeout(function() {
$demo.text("exit");
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="test">Hover me!</button>
<div id="demo"></div>
答案 1 :(得分:1)
你几乎拥有它。 jquery悬停函数接受两个参数:onHoverStart(或onMouseOver)处理程序和onHoverStop(或onMouseLeave)处理程序。您只需将警报添加到onHoverStop处理程序。
$('#test').hover(function(){
setTimeout(function(){
alert("enter");
}, 1000);
}, function(){
setTimeout(function(){
alert("escape");
}, 1000);
});
答案 2 :(得分:0)
<强> Working fiddle 强>
如果您愿意,可以在mouseleave
中遵循相同的想法,只需在timer_mouseleave
事件中清除计时器hover
:
var timer_mouseleave;
$('.test').hover(function(){
clearTimeout(timer_mouseleave);
mytimeout = setTimeout(function(){
alert("enter");
}, 2000);
}, function(){
clearTimeout(mytimeout);
});
$('.test').mouseleave(function() {
timer_mouseleave = setTimeout(function(){
alert("escape");
}, 2000);
});
希望这有帮助。
答案 3 :(得分:0)
试试这个。只需要在每个悬停事件中重置超时。
(function(){
var mytimeout = null;
$('.test').hover(function(){
clearTimeout(mytimeout);
mytimeout = setTimeout(function(){
alert("enter");
},1000);
});
})();