許多元素上的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隊列

回答

相關問題