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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js仿微博动态栏功能
Feb 22 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
webpack4的迁移的使用方法
May 25 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
详细分析vue响应式原理
Jun 22 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下连接mssql2005的代码
2011/01/17 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
php curl 上传文件代码实例
2015/04/27 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
python使用urlparse分析网址中域名的方法
2015/04/15 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python线程池如何使用
2020/05/28 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
艺术设计专业个人求职信
2014/04/10 职场文书
小组名称和口号
2014/06/09 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
酒店温馨提示语
2015/07/14 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Nginx利用Logrotate实现日志分割
2022/05/20 Servers