This question already has answers here:
Delay jquery hover event?
(6 answers)
Closed 7 years ago.
I have a bunch of images on one page and I am using the following to trigger an event:
$('.img').on('mouseover', function() {
//do something
});
Is there some way to add a delay such that if a user hovers for maybe 1 second, then it does "//do something" or actually triggers the "mouseover" event?
You can use setTimeout
var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
setTimeoutConst = setTimeout(function() {
// do something
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});
You could do that using a setTimeout along with a clearTimeout if the user leaves too soon:
var timer;
var delay = 1000;
$('#element').hover(function() {
// on mouse in, start a timeout
timer = setTimeout(function() {
// do your stuff here
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});
Use a timer and clear it when they mouseout incase they leave within 1000ms
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
I was looking for something like this as well, but with a secondary delay as well. I took one of the answers here and expanded upon it
This example shows a div after X seconds of mouseover and hides it after X seconds of mouseout. But disables if you hover over the shown div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.foo{
position:absolute; display:none; padding:30px;
border:1px solid black; background-color:white;
}
</style>
<h3 class="hello">
<a href="#">Hello, hover over me
<span class="foo">foo text</span>
</a>
</h3>
<script type="text/javascript">
var delay = 1500, setTimeoutConst,
delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
setTimeoutConst = setTimeout(function(){
$('.foo').show();
},delay);
}).mouseout(function(){
clearTimeout(setTimeoutConst );
setTimeoutConst2 = setTimeout(function(){
var isHover = $('.hello').is(":hover");
if(isHover !== true){
$('.foo').hide();
}
},delay2);
});
</script>
Working example
You can use jquery .Delay like this (not tested):
$("#test").hover(
function() {
$(this).delay(800).fadeIn();
}
);
http://api.jquery.com/delay/
Related
I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.
<script type="text/javascript">
$(document).ready(function(){
var _changeInterval = null;
$( ".badge_icon" ).hover(function() {
clearInterval(_changeInterval)
_changeInterval = setInterval(function() {
$(this).find(".badges_hover_state").fadeIn(500);
}, 1000);
},function() {
$(this).find('.badges_hover_state').fadeOut(500);
});
});
</script>
I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.
you could use this jquery script:
var myTimeout;
$('#div').mouseenter(function() {
myTimeout = setTimeout(function() {
//Do stuff
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
});
See the DEMO
Was able to solve this issue by adding window in front of variable name.
var myTimeout;
$('.div').mouseenter(function() {
window.el = $(this);
myTimeout = setTimeout(function() {
el.css("width","200px");
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
el.css("width","100px");
});
I have to hide a textbox only if the user hovers out > 2 seconds.
<div id="content">
<input type="text" id="txt1" />
</div>
$('#content').on('mouseleave', function(){
$('#txt1').delay(2000).hide();
});
This will wait for 2 seconds before hiding the textbox. But if the user comes back within 2 seconds it will still hide. How to prevent that from happening?
Use setTimeout/clearTimeout instead:
var clr;
$('#content').on('mouseleave', function () {
clr = setTimeout(function () {
$('#txt1').hide();
}, 2000)
}).on('mouseenter', function () {
clearTimeout(clr)
})
Also note that the delay in your example won't work at all since the .delay() method delays the execution of functions that follow it in the standard effects queue or with a custom queue. It won't delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
jsFiddle example
Use the good ol' fashion setTimeout and clearTimeout
var leaveTimeout;
$('#content').on('mouseleave', function() {
leaveTimeout = setTimeout(function() {
$('#txt1').hide();
}, 2000);
})
.on('mouseenter', function() {
clearTimeout(leaveTimeout);
});
How about a simpler CSS solution: http://jsfiddle.net/2Jtrb/2/.
HTML:
<div id="content">
<input type="text" id="txt1" />
</div>
CSS:
div {
outline: 1px dotted #000;
}
div > input {
visibility: hidden;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
EDIT: the input will also stay visible if it is focused.
div:hover > input, input:focus {
visibility: visible;
transition-duration: 0s;
}
Try this...
var theTimer;
$('#content').on('mouseleave', function(){
theTimer = setTimeout(function() {
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(theTimer);
});
DEMO
If you use setTimeout you can cancel the timeout if the user enters the text area again. That code looks something like:
var timeoutHandle;
$('#content').on('mouseleave', function(){
timeoutHandle = setTimout(
function () {
timeoutHandle = undefined;
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
if (timeoutHandle) clearTimeout(timeoutHandle);
});
By the way, this is similar to what other plugins provide so you might consider looking at the hover intent plugin here: http://cherne.net/brian/resources/jquery.hoverIntent.html.
You can try this:-
var typingTimer;
$('#content').on('mouseleave', function(){
typingTimer = setTimeout(function(){
$('#txt1').hide();
},2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(typingTimer);
});
Use setTimeout function.
var timeout = null;
$('#content').on('mouseleave', function() {
timeout = setTimeout(function() { $('#text1').hide();
});
Then when the user enters the div, clear the timeout.
$('#content').on('mouseenter', function() {
clearTimeout(timeout);
});
I wrote this without looking anything up, so I hope I didn't messed up ;)
I am showing the image preview when hovering over the image. Now I do keep the interval before displaying the preview image. say I set the delay as 1 sec, and within this if I dragged the mouse out of image, it still displays the preview since it is triggered during the mouse enter . How to fix this?
I need to display a preview only on hover after 1sec delay and not if the mouse is not with in the image?
On jQuery 1.9+, you could use delay/finish:
DEMO jsFiddle
$("#preview").hover(function(){
$("img").delay(1000).show(0); // passing 0 to show() will put animation in queue
}, function(){
$("img").finish().hide(); // finish() will clear any previous delay(), despite what argues the DOC
});
A basic skeleton using setTimeout() can be
var timer;
$('img').hover(function () {
timer = setTimeout(function () {
//do your stuff here
$('div').show();
timer = undefined;
}, 1000);
}, function () {
if (timer) {
clearTimeout(timer);
timer = undefined;
} else {
//hide the preview
$('div').hide();
}
})
Demo: Fiddle
Assign the setTimeout to a variable on mouseover event like this:
var timer = setTimeout(function() { doSomething(); }, 1000);
And then clear it on mouseout event so it doesn't show when you hover out of it:
clearTimeout(timer);
How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/
This question already has answers here:
setTimeout / clearTimeout problems
(8 answers)
Closed 9 years ago.
I need to trigger a method when a hover is made on a button for continous 1000 ms. Whenever hover is on other elements then timeout should be reset. How do I implement such thing using javascript/ jquery ?
Preferred solution would be one not requiring use of new plugin.
Try
$(function(){
var timer;
$('.item').hover(function(){
timer = setTimeout(function(){
console.log('do it')
}, 1000);
}, function(){
clearTimeout(timer);
});
})
Update:
$(function(){
$('body').on('mouseenter', '.item', function(e){
var timer = setTimeout(function(){
console.log('do it', e.target)
}, 1000);
$(this).data('myTimer', timer);
}).on('mouseleave', '.item', function(e){
clearTimeout($(this).data('myTimer'));
});
})
Demo: Fiddle