jquery 延迟执行实例介绍


Posted in Javascript onAugust 20, 2013
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.queue(function(){$(this).show();}); 
});

以上代码让页面中的按钮在页面加载后500毫秒隐藏,然后再过1500毫秒显示出来。
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.show(1); 
//.queue(function(){$(this).show();}); 
});

以上代码效果与前面的代码相同。
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide();}) 
.delay(1500) 
.show(1); 
//.queue(function(){$(this).show();}); 
});

以上代码同样只隐藏,不会再显示,相比代码2,queue里的代码没有调dequeue,由此可知,queue执行完后,也中止了动画队列的继续执行,需要调用dequeue使其执行下去(这里queue里的hide()不是一个动画,而将当前对象的动画放在queue里执行也会有问题)。
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.show(); 
//.show(1); 
});

以上代码只隐藏,而不会再显示!!这里show不再指定显示动画时长,则show方法不再是一个动画。由此可知,dequeue只能使得动画队列中的后续方法执行下去,不能使非动画队列中的jquery方法继续执行!
Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 #Javascript
js获取指定日期前后的日期代码
Aug 20 #Javascript
js 自定义个性下拉选择框示例
Aug 20 #Javascript
JavaScript打印iframe内容示例代码
Aug 20 #Javascript
JQuery之focus函数使用介绍
Aug 20 #Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 #Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 #Javascript
You might like
php遍历数组的4种方法总结
2014/07/05 PHP
Laravel下生成验证码的类
2017/11/15 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
合作协议书范文
2014/08/20 职场文书
小组口号霸气押韵
2015/12/24 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
python实现简单区块链结构
2021/04/25 Python
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
详解php中流行的rpc框架
2021/05/29 PHP
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS