順序顯示子菜單項

Question

我正在創建一個導航欄，並試圖添加此效果：當您將鼠標懸停在主菜單項上時，其下的每個子菜單項都會稍微延遲一點。一個接一個。

我已經有所作爲，但它是非常錯誤的。有時延誤時間過長，有時第二個子項出現在第一個子項之前！最糟糕的是，當您將鼠標從主要項目上移開時，它下面的列表消失了！總的來說不是很順利。這是我現在的代碼。

HTML

<div id="navbar"> 
    <ul id="main-menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Members</a> 
      <ul> 
       <li><a href="#">Sub item 1</a></li> 
       <li><a href="#">Sub item 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Events</a> 
      <ul> 
       <li><a href="#">Sub item 3</a></li> 
       <li><a href="#">Sub item 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Publications</a> 
      <ul> 
       <li><a href="#">Sub item 5</a></li> 
       <li><a href="#">Sub item 6</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</div>​ 

CSS

#navbar { width:550px; height:30px; position:relative; float:right; right:-7px; top:30px; } 

#main-menu { width:100%; float:right; list-style:none; } 

#main-menu li { float:left; } 

#main-menu li a { display:block; text-decoration:none; color:#000; background-color:#FC0; padding:8px; margin-right:10px; } 

#main-menu li ul { display:none; z-index:999; } 

#main-menu li:hover ul { display:block; position:absolute; } 

#main-menu li li { display:block; float:none; } 

jQuery的

$(document).ready(function(e) { 

    $('#main-menu li a').hover(function() 
    { 
     $(this).animate({ 
      backgroundColor : '#C60' 
     },200); 

     $('#main-menu ul li').each(function(e) { 
      $(this).delay(e * 200).hide().fadeIn(200);          
     }); 

    }, function(){ 
     $(this).animate({ 
      backgroundColor : '#FC0' 
     },200); 
    }); 

});​ 

請參閱this在這裏擺弄。

我怎樣才能使它平滑，功能性？

Answer 1

我會使用CSS轉換來淡入菜單項（並設置背景顏色）。您需要做的就是計算每個子li在第一次加載時使用jQuery的轉換延遲。例如：

$('#main-menu li ul li').each(function() { 
    var delay = $(this).index() * 200 + 'ms'; 

    $(this).css({ 
     '-webkit-transition-delay': delay, 
     '-moz-transition-delay': delay, 
     '-o-transition-delay': delay, 
     'transition-delay': delay 
    });     
}); 

然後在元素上設置適當的轉換。這裏有一個工作jsFiddle：http://jsfiddle.net/Hjxp5/8/