Delay jquery hover event?

Question

I would like to delay a hover event in jquery. I am reading from a file when user hovers over a link or label. I don't want this event to occur immediately in case the user is just moving the mouse across the screen. Is there a way to delay the event from firing?

Thank you.

Example code:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

UPDATE: (1/14/09) After adding the HoverIntent plugin the above code was changed to the following to implement it. Very simple to implement.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Thanks for providing usage for hoverIntent – JavaKungFu Dec 18 '14 at 00:37 — JavaKungFu, Dec 18 '14 at 00:37

score 92 · Accepted Answer · answered Jan 12 '09 at 15:31

Use the hoverIntent plugin for jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

It's absolutely perfect for what you describe and I've used it on nearly every project that required mouseover activation of menus etc...

There is one gotcha to this approach, some interfaces are devoid of a 'hover' state eg. mobile browsers like safari on the iphone. You may be hiding an important part of the interface or navigation with no way to open it on such a device. You could get round this with device specific CSS.

Or this plugin works also like a charm https://github.com/john-terenzio/jQuery-Hover-Delay — mica, Aug 31 '16 at 15:10

score 50 · Answer 2 · edited May 23 '17 at 12:08

50

You need to check a timer on hover. If it does not exist (ie this is the first hover), create it. If it exists (ie this is not the first hover), kill it and restart it. Set the timer payload to your code.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

I bet jQuery has a function that wraps this all up for you.

Edit: Ah yes, jQuery plugin to the rescue

edited May 23 '17 at 12:08

Community

1
1

answered Jan 12 '09 at 15:40

Crescent Fresh

115,249
25
154
140

9

Thanx anyway for a non-plugin solution! – Jrgns Oct 21 '10 at 09:42
4

I added a clearTimeout(timer); timer=null; in the mouseout side, but that worked perfectly and avoided YAP (yet another plugin) – Andiih Jan 16 '12 at 17:10
@Andiih Great call, and thanks for introducing me to the "YAP" acronym. – Jon May 29 '12 at 04:37
you probably mean debounce() – Vitim.us Jul 18 '16 at 19:37

Matthew Millman · Answer 3 · 2011-12-08T14:59:58.000

Totally agree that hoverIntent is the best solution, but if you happen to be an unfortunate sod who works on a website with a long and protracted process for approval of jQuery plugins, here's a quick and dirty solution which worked well for me:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

This one's just for expanding an <li> if the mouse has been on it for longer than 300ms.

Thanks, found this more useful than the other answers. – Ray Feb 19 '18 at 13:12 — Ray, Feb 19 '18 at 13:12

score 6 · Answer 4 · answered Jan 12 '09 at 15:32

6

You could use a setTimeout() call with a clearTimeout() on the mouseout event.

answered Jan 12 '09 at 15:32

Dan Monego

9,637
6
37
72

score 2 · Answer 5 · answered Apr 09 '16 at 13:32

In 2016 Crescent Fresh's solution didn't work as expected for me, so I came up with this:

$(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});

score -2 · Answer 6 · edited Mar 18 '14 at 16:26

My solution is easy. Delay open menu if user keeping mouseenter on obj over 300ms:

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});

Delay jquery hover event?

6 Answers6

Linked

Related