Delay jquery hover event

demo

Without delay, when user hovers over a link or label. the hover event to occur immediately and that is annoying when the user is just moving the mouse across the screen.

1. $(function() {
   
2.     $('#container a').hover(function() {
   
3.         $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
   
4.             {filename:'file.txt'},
   
5.             function() {
   
6.                 $(this).appendTo('#info');
   
7.             }
   
8.          );
   
9.     },
   
10.         function() { $('#info').remove(); }
    
11.     });
    
12. });

复制代码

After adding the HoverIntent plugin the above code was changed to the following to implement it.  Very simple to implement.

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

复制代码

the hoverIntent plugin for jquery: http://cherne.net/brian/resources/jquery.hoverIntent.htmlIt's absolutely perfect 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.

non-plugin solution

1. $(function() {
   
2.         var timer;
   
3. 
   
4.         $('#container a').hover(function() {
   
5.                 if(timer) {
   
6.                         clearTimeout(timer);
   
7.                         timer = null
   
8.                 }
   
9.                 timer = setTimeout(function() {
   
10.                         $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
    
11.                                 {filename:'file.txt'},
    
12.                                 function() {
    
13.                                         $(this).appendTo('#info');
    
14.                                 }
    
15.                         );
    
16.                 }, 500)
    
17.     },
    
18.     // mouse out
    
19.     });
    
20. });

复制代码

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:

1. $('li.contracted').hover(function () {
   
2.     var expanding = $(this);
   
3.     var timer = window.setTimeout(function () {
   
4.         expanding.data('timerid', null);
   
5. 
   
6.             ... do stuff
   
7. 
   
8.     }, 300);
   
9.     //store ID of newly created timer in DOM object
   
10.     expanding.data('timerid', timer);
    
11. }, function () {
    
12.     var timerid = $(this).data('timerid');
    
13.     if (timerid != null) {
    
14.         //mouse out, didn't timeout. Kill previously started timer
    
15.         window.clearTimeout(timerid);
    
16.     }
    
17. });

复制代码

This one's just for expanding an <li> if the mouse has been on it for longer than 300ms.
The easy.  Delay open menu if user keeping mouseenter on obj over 300ms:

1. var sleep = 0;
   
2.      $('#category li').mouseenter(function() {
   
3.     sleep = 1;
   
4.     $('#category li').mouseleave(function() {
   
5.         sleep = 0;
   
6.     });
   
7.     var ob = $(this);
   
8.     setTimeout(function() {                        
   
9.         if(sleept==1) {
   
10. 
    
11.         [...] Example:
    
12.         $('#'+ob.attr('rel')).show();
    
13. 
    
14.         }
    
15.     },300);
    
16. 
    
17. });

复制代码

From: stackoverflow