Функция задержки jQuery с выпадающим меню

<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();     
    });
});

Я использовал здесь функцию задержки, но она не работает должным образом. Пожалуйста помоги. Заранее спасибо.


drop-down-menu jquery delay
person Lokesh Yadav    schedule 20.12.2011    source источник
comment
Я буду первым, кто упомянет hoverIntent.   -  person Blazemonger    schedule 20.12.2011

Ответы (3)


arrow_upward
1
arrow_downward

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

person sirmdawg    schedule 20.12.2011

arrow_upward
0
arrow_downward

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

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

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

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

person jantimon    schedule 20.12.2011

arrow_upward
0
arrow_downward

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

person Sudhir Bastakoti    schedule 20.12.2011