Fade out menù jQuery dopo il ritardo

Question

Sto lavorando su un menu a discesa jQuery che svanisce quando si posiziona il mouse sulle voci di primo livello. Voglio impostarlo in modo che quando si sposta il mouse via il menu non scompare immediatamente. Ho questo codice:

$(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 );
    }  
  );
});

Dopo un secondo l'allarme accade, ma il menu non è sbiadito fuori.

Answer 1

window.setTimeout (), quindi questo fa riferimento all'oggetto finestra.

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

Answer 2

Dai un'occhiata alla hoverIntent . Vi darà un maggiore controllo del comportamento degli eventi mouseover / mouseout dalla configurazione:

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