许多元素上的jQuery队列

我有一个列表导航。 subnav是隐藏的，应该在mouseover上显示。（我试过mouserover，mouseenter和悬停..）许多元素上的jQuery队列

没有工作真的。问题是，它正在跳跃。如果我快速徘徊在所有的元素上，他们都想滑下去，那只是很好。

所以我试图队列（）的元素，看看动画（向下或向上滑动）完成显示下一步。现在队列总是只指向第一个列表项。

如何正确使用queue（）来查看所有元素的一个队列？

或者什么是最好的方式来做到这一点？唯一必须的是：它必须是slideDown。只设置显示：块或隐藏不看起来很不错...

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
<style type="text/css"> 

ul.main-nav { 
    margin: 0; padding: 0; 
    text-align: center; 
} 
ul.main-nav li.main-nav { 
    width:111px; 
    height:35px; 
    list-style: none; 
    float: left; 
    position: relative; 
    padding: 10px 15px 20px 14px; 
    margin:0 0 0 1px; 
} 
ul.main-nav li.main-nav ul.icon.subnav { 
    position: absolute; 
    width:140px; 
    padding-bottom:0px; 
    text-align: left; 
    display: none; 
} 
ul.main-nav li.main-nav ul.subnav li { 
    float: none; 
    display: block; 
    border-bottom:1px solid #434343; 
} 
ul.main-nav a { 
    display:block; 
} 
ul.main-nav ul.subnav li a { 
    padding: 8px 5px 8px 10px; 
} 
</style> 
<span class="queue"></span> 
<ul class="main-nav"> 
    <li class="main-nav active"> 
     <a class="main-nav" href="#">main-nav-1</a> 
     <ul class="icon subnav"> 
      <li><a href="#">subnav 1</a></li> 
      <li><a href="#">subnav 2</a></li> 
      <li><a href="#">subnav 3</a></li> 
      <li><a href="#">subnav 4</a></li> 
     </ul> 
    </li> 
    <li class="main-nav"> 
     <a class="main-nav" href="#">main-nav-2</a> 
     <ul class="icon subnav"> 
      <li><a href="#">subnav 1</a></li> 
      <li><a href="#">subnav 2</a></li> 
      <li><a href="#">subnav 3</a></li> 
      <li><a href="#">subnav 4</a></li> 
     </ul> 
    </li> 
    <li class="main-nav"> 
     <a class="main-nav" href="#">main-nav-3</a> 
     <ul class="icon subnav"> 
      <li><a href="#">subnav 1</a></li> 
      <li><a href="#">subnav 2</a></li> 
      <li><a href="#">subnav 3</a></li> 
      <li><a href="#">subnav 4</a></li> 
     </ul> 
    </li> 
    <li class="main-nav"> 
     <a class="main-nav" href="#">main-nav-4</a> 
     <ul class="icon subnav"> 
      <li><a href="#">subnav 1</a></li> 
      <li><a href="#">subnav 2</a></li> 
      <li><a href="#">subnav 3</a></li> 
      <li><a href="#">subnav 4</a></li> 
     </ul> 
    </li> 
<div class="clear"></div> 
</ul> 



<script> 
$(document).ready(function() { 
    var subnav = $("ul.subnav"); 
    function showIt() { 
     var n = subnav.queue("fx"); 
     $("span.queue").text(n.length); 
     setTimeout(showIt, 20); 
    } 
    showIt(); 


    $('li.main-nav').hover(function() { 
     $(this).children('ul').slideDown(600,function(){}); 
    },function() { 
     $(this).children('ul').slideUp(600,function(){}); 
    }); 

}); 
</script> 
</body> 
</html>

帮助将非常感激。非常感谢您的回复和任何建议。

来源

2013-04-15 caramba

添加.stop()将防止动画持续
修订

$('li.main-nav').hover(function() { 
    $(this).children('ul').stop().slideToggle(600); 
});

来源

2013-04-15 14:31:50 Spokey

Spokey工作！而已！谢谢，很容易 – caramba

对不起，它有时崩溃，我会尝试重现 – caramba

看起来像我不能重现我现在得到的问题。如果我快速悬停，并且一个元素完全打开，下次我将鼠标悬停时，它将打开整个大小 – caramba

问题是，它在跳。如果我在所有元素上快速徘徊，他们都希望滑动并向上，这只是一个很好的做法。

hoverIntent插件是完美的。它非常小，我几乎在所有项目中都使用它。简单地更改为：

$('li.main-nav').hoverIntent(makeTall, makeShort);

这里的工作fiddle

轻微的延迟将使得导航也更自然比stop()它仍然会跳这样的，但就是不排队（继续当你停下来）。

来源

2013-04-15 14:27:39 parliament

谢谢你，这是一个不错的小插件！1，我想获得它无需插件 – caramba

许多元素上的jQuery队列

回答

相关问题