jQuery实现带延迟效果的滑动菜单代码

本文实例讲述了jQuery实现带延迟效果的滑动菜单代码。分享给大家供大家参考。具体如下：

这是一款基于jQuery的滑动菜单，鼠标移到某菜单项上，菜单的背景可以滑动过来，平滑的滑动效果，炫动的导航效果，相比没有动画的菜单，这款菜单真的挺不错哦。

先来看看运行效果截图：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-延迟-样式-菜单-导航-代码/

具体代码如下：

！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 ' head titlejquery实用炫动的导航效果/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' .导航{宽度：960像素文本对齐：居中；背景# 06Fmargin:0 auto位置：相对；}.nav a { width :104 px h8 :41 px线高：41 px显示：内嵌块；右边距：30 px位置：相对；z-index :11111颜色： # FFF；}.nav _ bj { background: # F00宽度宽度：104像素宽度：41像素位置：绝对；top:0z索引：111;left:210px}/style脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ var XXX，re；$('.nav a ').将鼠标悬停在(function(){ XXX=$(this))上.位置()。向左；$('.nav _ bj ').动画({ left : xx })clear time out(re)；}).鼠标移出(function(){ cleartime out(re))；re=setTimeout(函数(){ $(')。nav _ bj ').animate({left:210}) }，500)；})})))/script/head dydiv class=' nav ' a href=' # '首页/aa href='# '我们/aa href='# '脚本下载/aa href='# '网页特效/adiv class=' nav _ bj '/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。