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类代码
Jun 27 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
angularJS中router的使用指南
Feb 09 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JavaScript的console命令使用实例
Dec 03 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
使用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+Html+缓存
2006/12/20 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
降低python版本的操作方法
2020/09/11 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
企业员工培训感言
2014/02/26 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
毕业设计论文评语
2014/12/31 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python