手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery delay()介绍及使用指南
jquery delay()介绍及使用指南
摘要:delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。jQuery1.4新增。用于将队列中的函数延时...

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"></div><br> <div id="div2"></div><br> <div id="div3"></div><br> <div id="div4"></div><br> <div id="div5"></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); });

【jquery delay()介绍及使用指南】相关文章:

jquery.validate使用时遇到的问题

jQuery 遍历函数详解

jquery任意位置浮动固定层插件用法实例

jquery使用each方法遍历json格式数据实例

jQuery插件制作之全局函数用法实例

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

jquery合并表格中相同文本的相邻单元格

Jquery zTree 树控件异步加载操作

jQuery插件制作之参数用法实例分析

jQuery实现表格行上移下移和置顶的方法

精品推荐
分类导航