[英]How to fire event after 3 sec of hovering
I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. 我有一个div,我想在用户连续徘徊他的鼠标3秒后才开始一个事件。 My code doesn't work well because it fires right after hover and doesn't "wait". 我的代码不能很好地工作,因为它在悬停后立即触发并且不会“等待”。
Code: 码:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});
You need to store timeout id somewhere and clear it on mouseout. 您需要在某处存储超时ID并在mouseout上清除它。 It's convenient to use data property to save this id: 使用data属性来保存此id很方便:
$(".inner_pic").mouseenter(function () { $(this).data('timeout', setTimeout(function () { alert('testing'); }, 3000)); }).mouseleave(function () { clearTimeout($(this).data('timeout')); alert('finish'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner_pic">PICTURE</div>
You can achieve this by delay
option: 您可以通过delay
选项实现此目的:
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });
Checkout the below code 查看以下代码
var myVar; $( "div#container" ) .mouseover(function() { myVar = setTimeout(function(){ alert("Hello"); }, 3000); }) .mouseout(function() { clearTimeout(myVar); });
div { background: red; margin: 20px; height: 100px; width: 100px; display:block; cursor: pointer; } div:hover { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div>
Try This Code: 试试此代码:
<div id='a' style="border:2px solid black" >
<h3>Hove On me</h3>
For 2000 milliseconds. You will get an alert.
</br>
</div>
$(document).ready(function(){
var delay=2000, setTimeoutConst;
$('#a').hover(function(){
setTimeoutConst = setTimeout(function(){
/* Do Some Stuff*/
alert('Thank You!');
}, delay);
},function(){
clearTimeout(setTimeoutConst );
})
})
</script>
DEMO: DEMO:
http://jsfiddle.net/uhwzzu1u/1/ http://jsfiddle.net/uhwzzu1u/1/
var st; $(".inner_pic").mouseenter(function(e) { var that = this; st = setTimeout(function() { alert('testing'); }, 3000); }).mouseleave(function() { clearTimeout( st ); alert('finish'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner_pic"> <h3>Picture Here - Hover me</h3> </div>
Assuming you have a div
with id
of myelement
, you can do this: 假设你有一个id
为myelement
的div
,你可以这样做:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter
and mouseover
right here: Jquery mouseenter() vs mouseover() . BTW,tere是一个有用的澄清问题:在这里使用mouseenter
和mouseover
: Jquery mouseenter()vs mouseover() 。 Consider this when choosing which to use. 在选择使用哪个时考虑这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.