jQuery 지연 기능 (드롭 다운 메뉴 포함)

Question

<ul id="mainNav"> 
    <li> <a href="#" class="greenTheme">MainNav</a> 
    <ul class="subNav gTheme"> 
     <li class="first"><a href="#">SubNav1</a><span></span></li> 
     <li><a href="#">SubNav2</a><span></span></li> 
    </ul> 
    </li> 
</ul> 

jQuery 호버 기능으로 드롭 다운 메뉴를 개발 중입니다. 숨기기 기능을 지연시켜야합니다. 다음 코드를 사용하고 있습니다.

//Show/Hide 
$('#mainNav > li').each(function(e){ 
$(this).hover(function(){ 
    $(this).find('ul.subNav').show(); 
}, function(){ 
    $(this).find('ul.subNav').delay(100000).hide();  
    }); 
}); 

여기서 지연 기능을 사용했지만 예상대로 작동하지 않습니다. 도와주세요. 미리 감사드립니다.

Answer 1

된다)는 애니메이션 기간 (예를 들어,이 1ms) 기간이 제공

$(this).find('ul.subNav').delay(100000).hide(1);  

을

http://api.jquery.com/show/

, .show (사용할 수있는 jQuery를 애니메이션 대기열에 show 또는 hide을 추가하려면 애니메이션 방법. .show() 메서드는 일치하는 요소의 폭, 높이 및 불투명도를 동시에 애니메이션합니다.

Answer 2

그냥 제안하면 HoverIntent를 사용하면 더 좋을 것입니다. 샘플 : http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility

Answer 3

기간을 추가하여 애니메이션 대기열에 숨김을 추가 할 수 있습니다. 위에서 언급했듯이 지속 기간이 없으면 큐 또는 "스택"의 일부가되지 않습니다. 이 jsFiddle를 체크 아웃 : 당신이 jQuery를 사용하고 있기 때문에 http://jsfiddle.net/mkprogramming/hyEC5/#base

//Show/Hide 
$('#mainNav > li').each(function(e){ 
    $(this).hover(function(){ 
    $(this).find('ul.subNav').show(); //fadeIn(); 
    }, function(){ 
    $(this).find('ul.subNav').delay(1000).hide(1); //fadeOut(); 
    }); 
}); 

내가 훨씬 더 전문적인 효과를 fadeIn() 및 fadeOut을 사용하십시오.