Jquery 드롭 다운 메뉴를 사용하여 메뉴 숨기기를 지연하는 방법은 무엇입니까?

Question

잘 작동하는 드롭 다운 메뉴가 있습니다. 그러나 메뉴에서 마우스를 가져 가면 다시 숨기지 않습니다. 그래서 기본적으로 나는 1 초의 지연을 원합니다.

내가 setTimeout에 대해 읽었지만 필요한지 확실하지 않습니까?

$('#mainnav a').bind('mouseover', function() 
{ 
    $(this).parents('li').children('ul').show(); 
}); 

$('#mainnav a').bind('mouseout', function() 
{ 
    $(this).parents('li').children('ul').hide(); 
}); 

Answer 1

setTimeout입니다.

$('#mainnav a').bind('mouseout', function() 
{ 
    var menu = this; 
    setTimeout(function() 
    { 
     $(menu).parents('li').children('ul').hide(); 
    }, 1000); 
}); 

Answer 2

"느리게"를 표시하거나 숨길 매개 변수로 지정하십시오. JQuery Docs에서.

$('#mainnav a').bind('mouseover', function() 
{ 
    $(this).parents('li').children('ul').show("slow"); 
}); 

$('#mainnav a').bind('mouseout', function() 
{ 
    $(this).parents('li').children('ul').hide("slow"); 
}); 

Answer 3

는로 마우스를 들어 내가 숨기기()를 호출하기 전에 체인 애니메이션을 추가합니다 : 2 초 지연을 줄 것이다

$('#mainnav a').bind('mouseout', function() 
{ 
    $(this).parents('li').children('ul').animate({opacity:0.99}, 2000).hide(); 
}); 

합니다.