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. Material Design说明

    原文链接: Material Design 引言 我们挑战自我,为用户创造了一种视觉语言,综合了好设计的经典原则,革新以及科技的可能性.这就是material design.这份说明是一个动态的文档, ...

  2. java Math.random()随机数的产生

    Math.random()是java内置产生随机数的函数,Math.random()能够产生[0,1)的浮点数,当我们要产生特定范围的数时,可以采用如下办法: 1.Math.random()*(最大数 ...

  3. Tornado 模板支持“控制语句”和“表达语句”的表现形式

    Tornado 的模板支持“控制语句”和“表达语句”,控制语句是使用 {% 和 %} 包起来的 例如 {% if len(items) > 2 %}.表达语句是使用 {{ 和 }} 包起来的,例 ...

  4. Linux下使用多线程模拟异步网络通信

    服务器 /* socket server * 2014-12-15 CopyRight (c) arbboter */ #include <unistd.h> #include <s ...

  5. Js与flash交互：在html页面中用js与MyReport插件交互

    Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...

  6. POJ 3352 无向图边双连通分量，缩点，无重边

    为什么写这道题还是因为昨天多校的第二题,是道图论,HDU 4612. 当时拿到题目的时候就知道是道模版题,但是苦于图论太弱.模版都太水,居然找不到. 虽然比赛的时候最后水过了,但是那个模版看的还是一知 ...

  7. Java中循环删除list中元素的方法总结

    印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后在今天使用的时候发现报错了,然后去科普了一下,发现这是一个误区.下面我们来一起看一下. Java中循环遍 ...

  8. mysql update语句，修改字段，，或者是批量修改字段

    更新一个字段,在它的后面加一个字符串,不查询数据库得到这个字段值 怎么添加?? 例如: 我的test表,有个user字段,我现在想在它后面加了另一个用户的名字 我在mysql数据库这样写 UPDATE ...

  9. git:hook declined FATAL: W refs/heads DENIED by fallthru error

    hook declined FATAL: W refs/heads DENIED by fallthru error git提交代码时报错,网上查了,最终结果竟然是测试人员没有给我配置写的权限,配置了 ...

  10. Python Tcp Socket

    socket(套接字),传输层通信的端点,由IP和端口号组成(IP,Port),可以通过socket精确地找到服务器上的进程并与之通信 python2.6实现,基于AF_INET(网络套接字) 类型S ...