本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：

这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-2-animate-style-nav-menu-codes/

具体代码如下：

！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=utf-8' /title两个有动画功能的导航菜单/title脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' # test1 a ')).将鼠标悬停在(function(){ var index=$(' # test1 a '))上.索引（这个);var width=$('#test1 a ').宽度();$('#test1 .showhover ').停止()。动画({left:width*index}，1000)；}) $('#test2 a ').将鼠标悬停在(function(){ var index=$(' # test2 a '))上.索引（这个);var width=$('#test2 a ').宽度();$('#test2 .showhover ').停止()。动画({left:width*index，opacity: ' 0.6 ' }，1000).停止（假，真)。动画({ opacity: ' 1.0 ' }，500)；})})/脚本样式类型='text/css ' .正文{ margin :10 px } img { border :0 } a { text-decoration : none；} ul { list-style :无；余量：0划水：0;}.菜单{ background : # 003399 height :25 px宽度宽度：600像素位置：相对；飞越：隐藏；}.菜单显示菜单.菜单显示悬停{位置：绝对值；}.菜单showmenu a { float:left显示：块；}.菜单显示菜单a { font :700 12px/25px微软雅黑；color: # fff宽度宽度：100像素宽度：25像素文本对齐：居中；}.菜单显示悬停{背景： # 990033；宽度width :100 pxh three :25 px }/style/head dydiv class=' menu ' id=' test1 ' div class=' show hover '/div class=' show menu ' a href=' # '网站首页/a a href='# '关于我们/a a href='# '新闻中心/a a href='# '产品中心/a a href='# '解决方案/a a href='# '联系我们/a/div/div style=' clear : both；'height :50 px '/div div class=' menu ' id=' test2 ' div class=' show hover '/div div class=' show menu ' a href=' # '网站首页/a a href='# '关于我们/a a href='# '新闻中心/a a href='# '产品中心/a a href='# '解决方案/a a href='# '联系我们/a /div/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。