Clever Geek Handbook

Dim jQuery menu after delay

I'm working on a jQuery dropdown menu that disappears when you hover over the top top level elements. I want to customize it so that when I move my mouse, the menu doesn't disappear instantly. I have this code:

$(document).ready(function(){
  $('ul#menu > li').hover(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
      setTimeout( function(){
        alert('fadeout');
        $(this).find('>ul').fadeOut('fast')
        }, 1000 );
    }  
  );
});

After a second, a warning occurs, but the menu does not disappear.

+2


source to share


2 answers


window.setTimeout (), so this refers to the window object.



// mouseout
function(){
  var el=this;
  setTimeout( function(){
    alert('fadeout');
    $(el).find('>ul').fadeOut('fast')
    }, 1000 );
}
+3


source


Have a look at hoverIntent . This will give you more control over event mouseover

/ mouseout

configuration behavior :



var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
};

$(document).ready(function(){
  $('ul#menu > li').hoverIntent(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
       $(this).find('>ul').fadeOut('fast');
    }  
  );
});
+3


source






More articles:


All Articles