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 相关文章推荐
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
初三政治教学反思
2014/01/30 职场文书
八一建军节活动方案
2014/02/10 职场文书
高三学生评语大全
2014/04/25 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android