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 相关文章推荐
jQuery自带的一些常用方法总结
Sep 03 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
详细分析React 表单与事件
Jul 08 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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完整的日历类(CLASS)
2006/11/27 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Python每天必学之bytes字节
2016/01/28 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
python二进制文件的转译详解
2019/07/03 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
tensorflow的计算图总结
2020/01/12 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
linux下进程间通信的方式
2013/01/23 面试题
心得体会怎么写
2013/12/30 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript