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必备 api中英文对照的chm手册 下载
May 03 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
基于vue实现分页效果
2017/11/06 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python实现抖音视频批量下载
2018/06/20 Python
python实现名片管理系统
2018/11/29 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python3.5安装python3-tk详解
2019/04/26 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python实现ip代理池功能示例
2019/07/05 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
用Python实现职工信息管理系统
2020/12/30 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
美发活动策划书
2014/01/14 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
python实现简单石头剪刀布游戏
2021/10/24 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技