Затухание меню jQuery после задержки

Question

Я работаю над выпадающим меню jQuery, которое исчезает, когда вы наводите верхние элементы верхнего уровня. Я хочу настроить его так, чтобы при перемещении мыши меню не исчезало мгновенно. У меня есть этот код:

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

Через секунду происходит предупреждение, но меню не исчезает.

Answer 1

window.setTimeout(), поэтому это относится к объекту окна.

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

Answer 2

Посмотрите на hoverIntent. Это даст вам больший контроль над поведением mouseover/mouseout событий по конфигурации:

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