Функция задержки 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 hover. Мне нужно поставить задержку на функцию hide. Я использую следующий фрагмент кода.

//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

Чтобы добавить show или hide в очередь анимации JQuery вы должны использовать продолжительность анимации (например, 1 мс)

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

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

Когда длительность предоставляется, .show() становится метод анимации. Метод .show() анимирует ширину, высоту и непрозрачность согласованных элементов одновременно.

Answer 2

Просто предложение, вы можете использовать HoverIntent для этого, было бы намного лучше. Образец: http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility

Answer 3

Вы можете добавить hide в очередь анимации, добавив продолжительность. Как упоминалось выше без какой-либо продолжительности, он не станет частью очереди или «стека». Проверьте это jsFiddle: 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(); 
    }); 
}); 

Поскольку вы используете JQuery я хотел бы использовать fadeIn() и fadeOut для гораздо более профессионального эффекта.