가로 놓기, 세로 슬라이드 아웃에 지연 추가 - jQuery

Question

항목 위로 빠르게 가져갈 때 항목을 "고집"하지 않도록해야합니다. 그래서 하위 항목이 커서를 가리 키지 않도록 지연을 추가하는 것이 좋습니다. 너가 일정 시간 동안 위에 공중 선회 할 때까지 밖으로.

표준 중첩 un-ordered 목록 설정, CSS 스타일 및 jQuery 표시/숨기기, 아래 코드가 있습니다.

이 외에도 마지막 레벨 항목에 숨김 지연을 추가하고 싶습니다. 두 번째 줄과 마지막 줄 사이의 "조인"은 10 픽셀 정도 밖에되지 않으므로 마우스를 움직이면 훨씬 정확하게 움직여야하며 탐색을 완전히 숨기지 않아야합니다.

어떻게해야합니까? A) 두 번째 레벨 ul에 지연을 추가하고 B) 숨기기에서 세 번째 레벨 ul에 지연을 추가합니다. 나는 속도에 대해서는 말하지 않고 있지만, 물리적 지연을 추가하고있다.

$(function() { 
    $('ul.sub-menu').hide(); 
    $('.sub-menu ul').hide(); 

    $('#menu-navigation li').hover(function(){ 
     $(this).children('ul').slideDown("fast"); 
     }, 
    function(){ 
     $(this).children('ul').hide(); 
    }); 

    $('#menu-navigation ul li').hover(function(){ 
     $(this).children('ul').slideDown("fast"); 
     }, 
    function(){ 
     $(this).children('ul').hide(); 
    }); 

}); 

Answer 1

가 타임 아웃을 설정하고 타임 아웃을 취소 할 수 있도록 할 때 변수에 저장 : 사용자가 마우스를 움직일 때

var second_lvl_timer; 
$('#menu-navigation li').hover(function(){ 
    var $this_hover_in = $(this); 
    second_lvl_timer = setTimeout(function() { 
     $this_hover_in.children('ul').slideDown("fast"); 
    }, 500); 
}, 
function(){ 
    var $this_hover_out = $(this); 
    clearTimeout(second_lvl_timer); 
    $this_hover_out.children('ul').hide(); 
}); 

이 타임 아웃을 부를 것이다 여기

내 코드입니다 #menu-navigation li 요소가 있고 타이머가 호출되기 전에 mouseout을 사용하면 해당 시간 초과가 취소됩니다 (위 예제에서 0.5 초). 나는이 만들어진 변수에서는 setTimeout에 익명 함수를 $(this) 문을 변경하여 코드를 업데이트

var third_lvl_timer; 
$('#menu-navigation ul li').hover(function(){ 
    var $this_hover_in = $(this); 
    clearTimeout(third_level_timer); 
    $this_hover_in.children('ul').slideDown("fast"); 
}, 
function(){ 
    var $this_hover_out = $(this); 
    third_lvl_timer = setTimeout(function() { 
     $this_hover_out.children('ul').hide(); 
    }, 500); 
}); 

--UPDATE--

: 당신은하지만 뒤로 세 번째 수준에 대해 동일한 작업을 수행 할 수 있습니다

호버 인/아웃. 여기에 jsfiddle가 있습니다 : http://jsfiddle.net/hzPg4/. 두 번째 레벨 호버 아웃은 시간 제한을 필요로하지 않기 때문에 전체 목록에서 마우스를 가져 가면 즉시 세 번째 수준의 정보가 사라지고 숨겨진 것으로 나타났습니다.

Answer 2

첫 번째 질문의 경우 jquery 지연 메서드를 사용하여 큐를 잠시 멈출 수는 있지만 더 이상 호버링을하지 않아도 이후 메서드는 계속 실행됩니다. 따라서이 메서드는 도움이되지 않습니다.

두 번째 질문에 대해서는 다시 숨기기 호출 전에 지연 메서드를 큐에 추가해 봅니다.

$('#menu-navigation li').hover(function(){   
    $(this).children('ul').slideDown("fast");   
    },  
    function(){   
    $(this).children('ul').delay(500).hide();  
});