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 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
浅析JavaScript动画
Jun 10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP序列化操作方法分析
2016/09/28 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python学生信息管理系统修改版
2018/03/13 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
英语演讲稿范文
2014/01/03 职场文书
交通安全演讲稿
2014/01/07 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
2016年春节问候语
2015/11/11 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android