jquery模仿css3延迟效果
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延迟效果的更多相关文章
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- 20个漂亮 CSS3 按钮效果及优秀的制作教程
在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...
随机推荐
- w530 在ubuntu 12.04 _x64 背光调节方法
So to get the screen brightness keys working with your Nvidia graphics card, create a file in the xo ...
- Protobuf, understand the hood
proto文件定义 package lm; message Foo{ required int32 id = 1; } message Bar{ required int32 id = 1 [defa ...
- CC3的多列属性Multi-column
CC3的多列属性Multi-column 一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便. 0 16-09-17 1 16 ...
- 根据文字计算Label的尺寸
CGSize size = [self.username.text boundingRectWithSize:(CGSize){130,20} options:NSStringDrawingUsesL ...
- 【好程序员笔记分享】——iOS开发之纯代码键盘退出
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS开发之纯代码键盘退出(非常简单) iOS开发之纯代码键盘退出 前面说到了好几次关于键盘退出的,但 ...
- android 利用Bitmap获取圆角矩形、圆形图片
1.在很多时候,我们要显示图片资源,需要将他的资源显示为圆角的:示例源码如下: public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,fl ...
- 从ASM迁移到ARM（1）：平台支持的迁移服务
Azure上的ARM模式为用户带来更好的管理,更多新的特性,更好的体验,因此目前正在使用经典模式(ASM)的用户,在了解和使用了ARM之后,也在考虑如何将原来基于ASM模式的虚拟机,存储,网络等IAA ...
- ubuntu install express
1:全局安装express 2:查看Express安装的版本信息 3:运行express 创建工程,提示express未安装 4:重新安装Express4,这次安装成功 5:使用Express构建项目 ...
- 在Bash中，如何判断某个命令是否存在？
if ! type "$foobar_command_name" > /dev/null; then # install foobar here,or poping up s ...
- Hibernate逆向工程全过程
前提你已经创建好了数据库,按如下操作进行: 1.添加hibernate.cfg.xml 在src下-->new-->other--->hibernate-->选择“Hibern ...