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/

jQuery - CSS下拉多级菜单动画

3 个答案: