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

您可以嘗試使用.slideDown()作為替代方法，它不會為元素的寬度設置動畫。 http://api.jquery.com/slideDown/

Answer 2

嘗試這個：

jQuery("#nav li").hover(function() {
    jQuery(this).children('ul').slideDown();
},function(){
     jQuery(this).children('ul').slideUp();
});

http://jsfiddle.net/Dg2Cb/3/

Answer 3

同時為高度和不透明度設置動畫：

$("#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 。

小提琴： http ： //jsfiddle.net/Dg2Cb/6/