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.