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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue router 源码概览案例分析
Oct 09 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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基于base64解码图片与加密图片还原实例
2014/11/03 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
js活用事件触发对象动作
2008/08/10 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python random模块常用方法
2014/11/03 Python
Python三元运算实现方法
2015/01/12 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
python文件读写代码实例
2019/10/21 Python
浅析python中while循环和for循环
2019/11/19 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
七一建党日演讲稿
2014/09/05 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP
Redis Lua脚本实现ip限流示例
2022/07/15 Redis