Ausblenden jQuery Menü nach Verzögerung

Question

Ich arbeite an einem jQuery Drop-down-Menü, das eingeblendet wird, wenn Sie auf der obersten Ebene Elemente schweben. Ich möchte es so eingestellt, dass, wenn Sie die Maus bewegen sich das Menü nicht sofort verschwindet. Ich habe diesen 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 );
    }  
  );
});

Nach einer Sekunde der Alarm passiert, aber das Menü wird nicht ausgeblendet.

Answer 1

window.setTimeout (), so bezieht sich dies auf das Fensterobjekt.

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

Answer 2

Hier finden Sie aktuelle hoverIntent . Es wird Ihnen eine bessere Kontrolle über das Verhalten der mouseover / mouseout Ereignisse durch Konfiguration:

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