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中令你抓狂的魔术变量
Nov 30 Javascript
ie 调试javascript的工具
Apr 29 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 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设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php pdo操作数据库示例
2017/03/10 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
javascript中常用编程知识
2013/04/08 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
Vue AST源码解析第一篇
2017/07/19 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
自荐信写法介绍
2014/01/25 职场文书
《自选商场》教学反思
2014/02/14 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
活动总结范文
2014/08/30 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL