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 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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中GET变量的使用
2006/10/09 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
js中的闭包实例展示
2018/11/01 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python中的并发编程实例
2014/07/07 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
戴尔美国官网:Dell
2016/08/31 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
应届生.NET方向面试题
2015/05/23 面试题
大四学年自我鉴定
2013/11/13 职场文书
经销商会议欢迎词
2014/01/11 职场文书
试用期员工考核制度
2014/01/22 职场文书
网络宣传方案
2014/03/15 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
总结Python常用的魔法方法
2021/05/25 Python