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 10 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
多种方式实现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
微信支付开发订单查询实例
2016/07/12 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
简单的php购物车代码
2020/06/05 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
PyQT实现多窗口切换
2018/04/20 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
财务会计毕业生自荐信
2013/11/02 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
2014年科技工作总结
2014/11/26 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
2015年宣传工作总结
2015/04/08 职场文书