only show menu item after it's been hovered on for a period of time

I have a list item that when hovered upon slides down another inner list. Problem I'm having is if you quickly hover over it accidentally it slide开发者_如何学Cs down and some times even ends up in a weird loop where it bounces between closed and open. My solution is to set a slight delay before showing it.

 $('#overlayNav li').hover(
     function() {
         var that = this;
         setTimeout(function(){test(that)},1000);
         function test(param) {
             if(param.id) {
                 $(param).find('ul').slideDown({easing: "easeOutBounce", duration: 900});
             }
         }, 

Problem is all this code does it delay the slide. The hover is still detected even if you hover for a fraction of a second as before...the only difference is that there's now a delay before it shows...what I need to say is after the timeout if the mouse is still over that element then show it. How do i do this?

All you have to do is keep track of the timer (via the element's data), and clear it on hover out:

$('#overlayNav li').hover(
     function() {
         var that = this;

         /*** Here! ***/
         $(this).data('timer', setTimeout(function(){test(that)},1000));

         function test(param) {
             if(param.id) {
                 $(param).find('ul').slideDown({
                     easing: "easeOutBounce", duration: 900
                 });
             }
         }
     },
     function () {

         /*** And here! ***/
         var timer = $(this).data('timer');
         if (timer) $(this).data('timer', clearTimeout(timer));

     }
});

http://cherne.net/brian/resources/jquery.hoverIntent.html

Simply put, the best solution...:)