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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
js表单登陆验证示例
Oct 19 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
常见python正则用法的简单实例
2016/06/21 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python中强大的format函数实例详解
2018/12/05 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python Tornado框架的使用示例
2020/10/19 Python
Python wordcloud库安装方法总结
2020/12/31 Python
我们的节日中秋活动方案
2014/08/19 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
诉讼授权委托书
2014/10/15 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
公司员工管理制度
2015/08/04 职场文书
高一地理教学工作总结
2015/08/12 职场文书