jQuery - CSS 下拉多级菜单动画

Question

我有像这样的标准多级菜单:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Dropdown</a>
       <ul class="sub-menu">
           <li><a href="#">Link #1</a></li> 
           <li><a href="#">Link #2</a></li>  
           <li><a href="#">Link #3</a></li>            
       </ul>
    </li>    
</ul>

来源:http://jsfiddle.net/Dg2Cb/

我想在这个页面上设置子菜单高度的动画(看起来像 jswing 效果):http://themes.truethemes.net/Karma/

是否有任何简单的(不像上面的例子那样困惑)的方法来实现这个目标？

这是我设法创建的最佳效果(但它看起来仍然很糟糕，因为它也呈现宽度):http://jsfiddle.net/Dg2Cb/1/

我可以使用 jQuery 缓动插件，但我很乐意在没有任何插件的情况下做到这一点。我知道如何为元素的高度设置动画，但棘手的部分是我必须更改其可见性并同时为其设置动画。

Answer 1

同时设置高度和不透明度的动画:

$("#nav > li").on("mouseenter mouseleave", function(e){
  e.type === "mouseenter" 
    ? $(".sub-menu", this).stop().animate({ height:'toggle', opacity:1 }, 250)
    : $(".sub-menu", this).stop().animate({ height:'toggle', opacity:0 }, 250) ;
});​

此外，不要将 .sub-menu 设置为 visibility:hidden - 而是设置为 display:none。

fiddle :http://jsfiddle.net/Dg2Cb/6/