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

Animate как высота и непрозрачности вместе:

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

Answer 2

Вы можете попробовать использовать .slideDown() в качестве альтернативы, которая не анимирует ширину элемента. http://api.jquery.com/slideDown/

Answer 3

попробовать это:

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

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