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. 查看kafka的group.id

    kafka/config目录下的consumer.properties中可以看到

  2. UI基础视图----UILabel总结

    UILabel是UIKit框架中非常常用的视图类,是UIView的子类,是UIWindow,UIImageView等的兄弟类,因为继承自UIView,所以继承了UIView中的属性和方法,大部分都可以 ...

  3. angularjs字符串插值（$interpolate）

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  4. AngularJS的$http服务的应用

    $http有很多参数和调用方法,本文只记录比较常用的应用及参数. $http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP ...

  5. nodejs 简单http 文件上传demo

    // 这是一个简单的Node HTTP,能处理当前目录的文件 // 并能实现良种特殊的URL用于测试 // 用http://localhost:8000 或http://127.0.0.1:8000 ...

  6. C++Primer笔记(3)

    标准库类型string表示可变长的字符序列,使用前先包含string头文件.(哈哈,终于可以逃脱C语言中的str函数系列了.)因为是标准库的一部分,所以string被定义在命名空间std中.所以你懂该 ...

  7. 关于毕设WiFi选型

    毕设做基于WiFi的家庭灯光影音控制,现在主要是WiFi模块上的选型,自己选了ESP8266. 一开始是看到了机智云的内容,想尝试机智云.但是目前没有母版,不知道怎么下手. 接下来就先尝试通过通用类型 ...

  8. SQL中什么叫模式

    模式(schema) 是 数据库体系结构中的一个节点对于 SQL Server 数据库来说.访问具体的一个表,可以由 4个部分组成分别为 服务器名, 数据库名,模式名,表名.对于访问本地的数据库因为 ...

  9. 10个经典的Android开源项目(附源码包)

    最近在抽空学习Android系统开发,对Android学习也比较感兴趣,刚开始学就试着在网上找几个项目源码研究看下,以下就将找到的Android项目源码列出,希望对正在或准备学习Android系统开发 ...

  10. 在CentOS上安装FFMPEG和Gstream-ffmpeg

    当我们用CentOS7自带的源时,是yum search不到标题上述的两个相关的包的,而opencv需要用到FFmpeg读取视频文件.这就必须安装了. 可以参考FFMPEG官方给出的文档: http: ...