Question

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 slides 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?

Answer 1

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

     }
});