导航栏二级下拉菜单的js特效

2019独角兽企业重金招聘Python工程师标准>>>

很多大型的网站的导航菜单栏会有二级菜单，那么刚开始的时候这些二级菜单是隐藏的，我们通过鼠标点击或者把鼠标放在上面就会让二级菜单显示，有些二级菜单会有一些动画效果，我们今天讲的是二级菜单从上面慢慢下滑并出来，以一个很平滑的方式出场，相比传统的直接出现更有交互性。

今天这里我主要说的是一个js特效，通过鼠标放在上面，让导航栏改变颜色，并且让二级菜单从上面缓慢平滑的出现，有一个效果，这个效果的实现其实也很简单，就是让二级菜单初始状态为全透明，我们通过js改变它的透明度和位置，从而让它实现，从无到有，从上面平滑出来的效果。

附上js代码：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$("#Menu ul li").hover(function(){

var _this=$(this)

t=setTimeout(function(){

_this.addClass("active");//添加class=active

_this.find(".nav").animate({opacity:1,"top":"50px"},500);

},300);

//鼠标滑上去时

},function(){

clearTimeout(t);

//鼠标移开时

$(this).removeClass("active");

$(this).find(".nav").animate({opacity:0,"top":"0px"},500);

});

</script>

转载于:https://my.oschina.net/zhouhang0907/blog/537411