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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 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
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue组件中slot的用法
2018/01/30 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
python文件比较示例分享
2014/01/10 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
工作求职信
2014/07/04 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
单位收入证明范本
2015/06/18 职场文书
python基础之匿名函数详解
2021/04/21 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL