jquery delay()介绍及使用指南


Posted in Javascript onSeptember 02, 2014

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行,也可以用于自定义队列。

duration:延时时间,单位:毫秒

queueName:队列名词,默认是Fx,动画队列。

参数 描述
speed 可选。规定延迟的速度。 可能的值: 毫秒 "slow" "fast"
queueName 可选。规定队列的名称。 默认是 "fx",标准效果队列。
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});

完整测试代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").delay("slow").fadeIn();
  $("#div2").delay("fast").fadeIn();
  $("#div3").delay(800).fadeIn();
  $("#div4").delay(2000).fadeIn();
  $("#div5").delay(4000).fadeIn();
 });
});
</script>
</head>

<body>
<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>
</body>
</html>

例:

头部与底部延迟加载动画效果

$(document).ready(function() {
 $('#header')
 .css({ 'top':-50 })
 .delay(1000)
 .animate({'top': 0}, 800);

 $('#footer')
 .css({ 'bottom':-15 })
 .delay(1000)
 .animate({'bottom': 0}, 800); 
});
Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
jsonp原理及使用
Oct 28 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
JS中的BOM应用
Feb 02 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
使用jquery实现放大镜效果
Sep 02 #Javascript
javascript初学者常用技巧
Sep 02 #Javascript
js/jquery判断浏览器的方法小结
Sep 02 #Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 #Javascript
jQuery级联操作绑定事件实例
Sep 02 #Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 #Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 #Javascript
You might like
PHP的中问验证码
2006/11/25 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
JavaScript 异步调用
2017/10/25 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python实现的简单dns查询功能示例
2017/05/24 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
结婚喜宴主持词
2014/03/14 职场文书
师德师风演讲稿
2014/05/05 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
学生保证书格式
2015/02/27 职场文书
加入学生会自荐书
2015/03/05 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS