Quitter le menu jQuery après un délai

Question

Je travaille sur un menu déroulant jQuery qui apparaît lorsque vous passez la souris sur les éléments de niveau supérieur. Je veux le régler de telle sorte que lorsque vous déplacez la souris, le menu ne disparaît pas instantanément. J'ai ce 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); 
    } 
); 
}); 

Après une seconde alerte se produit, mais le menu est pas estompé. Window.setTimeout(), donc cela fait référence à l'objet fenêtre.

Answer 1

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

Answer 2

Regardez hoverIntent. Il vous donnera un meilleur contrôle du comportement des mouseover/mouseout événements par configuration:

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