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

更新时间：2015年09月02日 16:27:14 作者：企鹅

这篇文章主要介绍了jQuery实现带延迟效果的滑动菜单,涉及jquery鼠标事件操作页面属性定时变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实用炫动的导航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{width:960px;text-align:center;background:#06F;margin:0 auto;position:relative;}
.nav a{width:104px;height:41px;line-height:41px;display:inline-block;margin-right:30px;position:relative;z-index:11111;color:#FFF;}
.nav_bj{background:#F00;width:104px;height:41px;position:absolute;top:0;z-index:111;left:210px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 var xxx,re;
 $(".nav a").mouseover(function(){
  xxx=$(this).position().left;
  $(".nav_bj").animate({left:xxx})
  clearTimeout(re);
  }).mouseout(function(){
   clearTimeout(re);
   re=setTimeout(function(){
    $(".nav_bj").animate({left:210})
   },500);
  })
 })
</script>
</head>
<body>
<div class="nav">
<a href="#">首页</a>
<a href="#">脚本之家</a>
<a href="#">脚本下载</a>
<a href="#">网页特效</a>
<div class="nav_bj"></div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时，会弹出像tips的提示框，这种效果想必大家都有见到过吧，下面有个不错的示例，大家可以感受下
2013-10-10
jQuery中ajax和post处理json的不同示例对比
用了post方法去处理ajax回调的json数据，死活取不到，后台就是有json返回了，关于这个问题的解决方法如下，你若遇到可以看看
2014-11-11
AJAX分页的代码(后台asp.net)
查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。
2011-02-02
将JavaScript的jQuery库中表单转化为JSON对象的方法
这篇文章主要介绍了将JavaScript的jQuery库中表单转化为JSON对象的方法,包括对序列化时空格问题的处理方法,需要的朋友可以参考下
2015-11-11
jquery 年会抽奖程序
最近公司年会，有个流程要抽奖，特写了个一个简单的，纯jq代码，发给大家共享一下
2011-12-12
jQuery插件PageSlide实现左右侧栏导航菜单
jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就滑出来，再次点击隐藏页面以外的地方，它就又关闭
2015-04-04
Jquery post传递数组方法实现思路及代码
Jquery post 传递数组以做批量删除会需要传递要删除的数据ID数组，下面是具体的实现代码，感兴趣的童鞋们可以参考下
2013-04-04
jQuery zTree如何改变指定节点文本样式
这篇文章主要介绍了jQuery zTree如何改变指定节点文本样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
JavaScript Canvas实现高清绘制效果
在我们日常绘制canvas的时候都不可避免的遇到一个问题，那就是canvas绘制出来的东西可能会有模糊，所以本文为大家准备了解决canvas绘制模糊的方法，希望对大家有所帮助
2023-06-06
jQuery使用slideUp方法实现控制元素缓慢收起
这篇文章主要介绍了jQuery使用slideUp方法实现控制元素缓慢收起的功能,实例分析了jQuery中slideUp方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03