本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码。分享给大家供大家参考。具体如下：

这是一款加入了jQuery的菜单，一个看似平凡菜单突然有味道、有生机起来，这里将jQuery1.3.2引用进来，让弹出的二级菜单具备淡入淡出的效果，虽然就效果本身来说并不起眼，但比起无任何效果的菜单，从体验上来说，已经强了很多倍。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-淡入淡出-2l-导航-菜单-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/标题栏/标题样式类型=' text/CSS ' * { margin 33600 px；padd :0 px font-size :12 px；} ul { list-style-type : no；} a { text-decoration : nonecolor : # 000 } # nav { line-height :30 px；} # nav li { float:left宽度宽度width:100px } #导航阿利{显示：块宽度宽度：100像素背景# ccc文本对齐：居中；} #导航阿利：悬停{背景： # 666；color : # ffffont-weight : bold；} # nav Li ul {线高：20 px位置：绝对；display : none } # nav Li ul Li { float : left宽度宽度：130px}#nav li ul阿利{显示：块宽度宽度：130像素背景技术# eeetext-向左对齐：左填充left:30px} # nav Li ul阿利：悬停{背景：红色；字体粗细：正常；}/style脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ var key=$(' # navli ')；钥匙。将鼠标悬停在(function(){ $(this))上.儿童(' .nn1 ').fadeIn()；});key.mouseout(function(){ $(this)).儿童(' .nn1 ').淡出()；});});/script/headdydivul id=' nav ' lia href=' # '第一个/aul class=' nn1 ' lia href=' # ' 1.0001/a/lilia href=' # ' 1.0002/a/lilia href=' # ' 1.0003/a/Li/ul/lilia href=' # '第二个/aul class=' nn1 ' lia href=' # ' 2.0001/a/lilia href=' # ' 2.0002/a/lilia href=' # ' 2.0003/a/Li/ul/lilia href=' # '第三个/aul class=' nn1 ' lia href=' # 3.0001/a/lilia href=' # ' 3.0002/a/lilia href=' # ' 3.0003/a/Li/ul/lilia href=' # '第四个/aul class=' nn1 ' lia href=' # ' 4.0001/a/lilia href=' # ' 4.0002/a/lilia href=' # ' 4.0003/a/Li/ul/Li/ul/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。