25

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?

Rolando
  • 58,640
  • 98
  • 266
  • 407

5 Answers5

50

You can use setTimeout

var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
  setTimeoutConst = setTimeout(function() {
    // do something
  }, delay);
}, function() {
  clearTimeout(setTimeoutConst);
});
andershagbard
  • 1,116
  • 2
  • 14
  • 38
Anoop
  • 23,044
  • 10
  • 62
  • 76
  • 13
    This does not capture intent. If the user hovers, then mouses away from it, I want it to not actually do what is in the setTimeout. – Rolando Mar 22 '13 at 19:48
  • I changed code check if it solve your problem – Anoop Mar 22 '13 at 19:50
  • 1
    This inside the setTimeout function seems to change and no longer be the DOM object the function was affecting but instead the window/global object so the function I wrote stops working. – Andrew Koper Aug 24 '14 at 02:57
  • For Add delay effect of 1 sec on the nav hover. var menuHoverTimeout; $(someel).hover( function() { menuHoverTimeout = setTimeout(function(){ // do stuff on hover }, 1000); }, function(){ clearTimeout(menuHoverTimeout); // do stuff when hover off } ); – Chintan Patel Jan 21 '19 at 09:56
  • I've had to change to $(".img").hover( in order to work. – lisandro Mar 23 '23 at 20:36
32

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);
});
Ayush
  • 41,754
  • 51
  • 164
  • 239
  • This makes it very clear why two functions were passed into the hover function, and when each of them are called. – Brian J Nov 06 '14 at 19:41
8

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);
    }
});
Mark Pieszak - Trilon.io
  • 61,391
  • 14
  • 82
  • 96
4

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

Trevor Wood
  • 2,347
  • 5
  • 31
  • 56
2

You can use jquery .Delay like this (not tested):

$("#test").hover(
    function() {
        $(this).delay(800).fadeIn();
    }
);

http://api.jquery.com/delay/

Zilberman Rafael
  • 1,341
  • 2
  • 14
  • 45