3

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

<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 缓动插件，但很想在没有任何插件的情况下这样做。我知道如何为元素的高度设置动画，但棘手的部分是我必须同时更改它的可见性并为其设置动画。

4

3 回答 3

3

您可以尝试使用.slideDown()不为元素宽度设置动画的替代方法。http://api.jquery.com/slideDown/

于 2012-05-21T00:50:59.733 回答
3

试试这个：

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

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

于 2012-05-21T00:54:20.353 回答
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/

于 2012-05-21T00:59:36.873 回答