[英]jQuery - CSS dropdown multilevel menu animation
我有像这样的标准多级菜单:
<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缓动插件,但很乐意在没有任何插件的情况下这样做。 我知道如何为元素的高度设置动画,但棘手的部分是我必须改变其可见性并同时为其设置动画。
您可以尝试使用.slideDown()
作为替代方法,它不会为元素的宽度设置动画。 http://api.jquery.com/slideDown/
尝试这个:
jQuery("#nav li").hover(function() {
jQuery(this).children('ul').slideDown();
},function(){
jQuery(this).children('ul').slideUp();
});
同时为高度和不透明度设置动画:
$("#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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.