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

您可以通过添加持续时间将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来获得更专业的效果。

Answer 2

要将show或hide添加到jQuery动画队列，您必须使用动画持续时间（例如1ms）

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

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

当提供持续时间时，.show（）成为动画方法。 .show（）方法同时动画匹配元素的宽度，高度和不透明度。

Answer 3

只是一个建议，你可以使用HoverIntent，它会好得多。示例：http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility

带有下拉菜单的jQuery延迟功能

3 个答案: