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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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&mysql(五)
2006/10/09 PHP
杏林同学录(九)
2006/10/09 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python restful框架接口开发实现
2020/04/13 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
AJAX的全称是什么
2012/11/06 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
打架检讨书100字
2014/01/19 职场文书
房产委托公证书
2014/04/08 职场文书
2014年教研工作总结
2014/12/06 职场文书
2016年元旦致辞
2015/08/01 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python