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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
angular中的cookie读写方法
Aug 02 Javascript
基于javascript的拖拽类封装详解
Apr 19 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读取javascript设置的cookies的代码
2010/04/12 PHP
php继承的一个应用
2011/09/06 PHP
file_get_contents("php://input", "r")实例介绍
2013/07/01 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
用python制作游戏外挂
2018/01/04 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
python返回数组的索引实例
2019/11/28 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python中如何添加自定义模块
2020/06/09 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
大学生活动总结怎么写
2014/04/29 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
辞职信标准格式
2015/02/27 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python