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 相关文章推荐
文本加密解密
Jun 23 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
详解Vuex管理登录状态
Nov 13 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
JavaScript中while循环的基础使用教程
Aug 11 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python面试题小结附答案实例代码
2019/04/11 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Python调用C/C++的方法解析
2020/08/05 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
毕业生找工作的自我评价
2013/10/18 职场文书
文明班级建设方案
2014/05/15 职场文书
财务会计专业自荐书
2014/06/30 职场文书
三好学生评语大全
2014/12/29 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
python b站视频下载的五种版本
2021/05/27 Python