顺序显示子菜单项

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/