Задержка fadeOut menu jquery

Question

Я новичок в JQuery, и я пытаюсь создать меню, отображаемое при наведении с помощью fadeIn, и когда мышь уходит, чтобы начать отсрочку, а затем закройте меню с fadeout.

Мой код до сих пор ... я сделал jsFiddle тоже JSFIDDLE

$('#menu > li').on('mouseover', function(e){ 
 
    $(this).find("ul:first").stop().fadeIn(120); 
 
    $(this).find('> a').addClass('active'); 
 
}).on('mouseout', function(e){ 
 
    $(this).find("ul:first").stop().delay(2000).fadeOut(120); 
 
    $(this).find('> a').removeClass('active'); 
 
});

Answer 1

изменить последовательность delay и stop и использовать более длительный срок fadeOut.

$(this).find("ul:first").delay(2000).stop().fadeOut(500); 

Демо: http://jsfiddle.net/tusharj/YGB5G/39/

EDIT

Вы можете также использовать hover следующим образом:

$('#menu > li').hover(function (e) { 
    $(this).find("ul:first").finish().fadeIn(120); 
    $(this).find('> a').addClass('active'); 
}, function (e) { 
    $(this).find("ul:first").finish().delay(1000).fadeOut(1000); 
    $(this).find('> a').removeClass('active'); 
}); 

Демо: http://jsfiddle.net/tusharj/YGB5G/43/

Answer 2

Используя foolowing путь у ou может сделать fadeOut.

$("#row_id").fadeOut('slow',function(){ $(this).remove(); });

Вы также можете использовать время в миллисекундах вместо «медленного» без ".

Answer 3

Вы также можете достичь этого, используя чистый css, используя transitionproperty и селектор :hover. Фокус в том, что вам нужно использовать свойство opacity:0; вместо display:none;, чтобы скрыть свои подменю, потому что вы не можете применять переходы по свойству display.

#menu ul, #menu2 ul { 
... 
transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-o-transition: opacity .5s ease-in-out; 
opacity:0; 
} 
#menu li:hover > ul, #menu2 li:hover > ul { 
    opacity:1 
} 

Демо: http://jsfiddle.net/YGB5G/42/

Также обратите внимание, что второй уровень выпадающих меню отображается таким же образом. Это не так в других ответах.

EDIT

вы можете использовать transition-delay: Xs; добавить задержку X секунд воздействия на отведении указателя мыши. См. Сообщение this. Вот демо-код с кодом: http://jsfiddle.net/YGB5G/44/