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)
}

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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;
});

Answer 6

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);
});