HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

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

<link href="" rel="stylesheet">

</head>

<style type="text/css">

	.nav {

		width:200px;

		position: fixed;

		right:0px;

		top:50%;

	}

	.nav a{

		width:200px;

		height:40px;

		line-height: 40px;

		background: orange;

		display: block;

		text-align: left;

		text-indent: 10px;

	    right:-160px;

		color:#fff;

		position: relative;

	}

	.nav a:nth-of-type(odd){

		background:#cecece;

	}

</style>

<body>

    <div class="nav">

    	<a href="">1</a>

    	<a href="">2</a>

    	<a href="">3</a>

    	<a href="">4</a>

        <a href="">5</a>

    	<a href="">6</a>

    </div>

</body>

</html>

JQUERY

<script type="text/javascript">

	var _nav = $('.nav');

	var _temp;

	_nav.hover(function(){

          $nav = $(this);

          _temp = setTimeout(function(){

          	$nav.find('a').each(function(i){//每个都执行相同的函数，如果没有延迟settimeout就没有延迟效果

          		var $a = $(this);

          		setTimeout(function(){

          			$a.animate({'right':0},200)

          		},50*i)//关键

          	})

          },100);//其实这个函数可以不要，只是为了平缓过渡吧

	},function(){

		if(_temp){clearTimeout(_temp)};

        $nav = $(this);

        _temp = setTimeout(function(){

          	$nav.children('a').each(function(i){

          		var $a = $(this);

          		setTimeout(function(){

          			$a.animate({'right':'-160'},200)

          		},50*i)

          	})

        },100);

	})

</script>

　　

jquery模仿css3延迟效果的更多相关文章

  1. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  2. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  3. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  4. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  5. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  8. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  9. 20个漂亮 CSS3 按钮效果及优秀的制作教程

    在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...

随机推荐

  1. CSS基础知识笔记(一)

    css 样式由选择符和声明组成,而声明又由属性和值组成: 选择符: 又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声 ...

  2. (转)IIS5.1的安装配置并发布ASP.NET网站

    最近跟老师做一个桥梁养护系统的项目,要求用VS2008+Sql Server2000,服务器用IIS.由于之前做过的ASP.NET项目都是用的VS内置的服务器,并没有使用过IIS,第一次搭,花了几个小 ...

  3. NVelocity引擎

    NVelocity引擎输出HTML流***(一般处理程序中) VelocityEngine vltEngine = new VelocityEngine(); vltEngine.SetPropert ...

  4. 《第一行代码》学习笔记20－广播接收器Broadcast_Receiver（3）

    1.强制用户下线的逻辑并不是写在MainActivity里的,而是应该写在接收这条广播的广播接收器里面,这样强制下线的功能就不会 依附于任何的界面,不管是在程序的任何地方,只需要发出一条广播,就可以完 ...

  5. Ubuntu 12.04.5 LTS 上安装hadoop 2.6.0后运行自带的例程wordcount

    注:我所有的操作均通过Xshell 5远程连接Ubuntu进行实施 第一步:启动hadoop,利用jps查看hadoop是否已经启动,如果没有启动用start-dfs.sh脚本启动(hadoop2.X ...

  6. Visual Studio/vs2013 正忙

    打开VS解决方案时一直显示Visual Studio正忙,项目卡在初始化,此后试了很多方法,将项目拷贝到领一个磁盘当中再打开就可以直接打开了

  7. linux环境下jdk 安装以及maven私服搭建

    1:准备资源      linux服务器,jdk和nexus  安装包    2:网络通畅,保持windows端和linux服务器端网络通畅.     3: 安装jdk和配置环境变量      进入到 ...

  8. （四）CodeMirror - API

    内容相关 cm.getValue() cm.setValue() cm.getRange() editor.getRange({line:1},{line:2}) // 获取内容块字符 cm.repl ...

  9. android之保存偏好设置信息到shareSharedPreferences,轻量级的保存数据的方法

    android之保存偏好设置信息到shareSharedPreferences,轻量级的保存数据的方法   SharedPreferences保存数据到xml文件 有时候要保存activity的某些状 ...

  10. CSU 1120 病毒

    最长公共上升子序列(LCIS) 裸的算法题. 动态规划: 两组数组a[n].b[m]. f[i][i]表示以a[i].b[j]结尾的两个数组的LCIS. 转移方程: a[i]!=b[j] : f[i] ...