How to delay the moverover hover () function in jquery and only execute when the cursor is on an element for some given duration

Question

<ul id="menu"> <li>What new? <ul class="active"> <li><a href="#">Weekly specials</a></li> <li><a href="#">Last night pics!</a></li> <li><a href="#">Users' comments</a></li> </ul> </li> <li>Member extras <ul> <li><a href="#">Premium Celebrities</a></li> <li><a href="#">24-hour Surveillance</a></li> </ul> </li> <li>About Us <ul> <li><a href="#">Privacy Statement</a></li> <li><a href="#">Terms and Conditions</a></li> <li><a href="#">Contact Us</a></li> </ul> </li> </ul> 

JQuery Code:

  <script> $(document).ready(function(){ $('#menu>li>ul>li').hide(); $('#menu>li').click(function(e){e.stopPropagation();}); $('#menu>li').hover( function(){ t=$(this); $(t).find('ul>li').slideToggle(); }, function(){ $(t).find('ul>li').slideToggle(); } ); }); </script> 

I want to make a list of vertical menus with additional lists that expand when the mouse hovers over it and shrinks when the mouse is missing. The above mention code works well, but the only thing that happens when moving the cursor down down up the list is that each item, until I reach the top of the list, expands and collapses. What should I include in order to avoid this behavior so that the list item expands only when the cursor rests on it for a while (say, 500 milisecs)

Answer 1

Adding this as an answer as it seemed to solve your problem:

There is an evil library called Hover Intent to do the same. It overrides the standard .hover() method with custom delay.

Answer 2

You will need setTimeout:

 $('#menu>li').hover( function(){ var t = $(this); setTimeout(function(){ if(t.is(":hover")) // Don't fire the event if #menu>li is not hovered t.find('ul>li').slideToggle(); }, 500); }, function(){ $(this).find('ul>li').slideToggle(); } ); 

Answer 3

Demo

try it

 $(document).ready(function () { $('#menu>li>ul>li').hide(); $('#menu>li').click(function (e) { e.stopPropagation(); }); $('#menu>li').hover( function (event) { event.preventDefault(); $(this).find('ul>li').stop().slideDown(); }, function (event) { event.preventDefault(); $(this).find('ul>li').stop().slideUp(); }); }); 

Hope this helps, thanks