jquery中利用队列依次执行动画
如果有5个隐藏的div,要让它们依次显示,通常的做法是要一个一个嵌套在回调函数里面,这样导致代码看起来非常不直观。
$("#div1").slideDown(1000,function(){
$("#div2").slideDown(1000,function(){
...
...
});
});
这个情况下,就可以使用队列,此时需要借助一个辅助对象,假设是$("#queueHelper"):
var divs = $("div");
var a=0;
divs.hide(); for (var i = 0; i < divs.length; i++) {
$("#queueHelper").queue("myLists",function () {
divs.eq(a++).slideDown(500 , DoNext); //回调函数统一为DoNext
});
} function DoNext(){
$("#queueHelper").dequeue("myLists");
} DoNext();
它思路就是找到一个辅助对象,向它一次性插入需要执行的动作,然后再一次性取出来。
在插入队列的时候,只是把方法保存进去。而等到出列的时候,才开始真正执行,并且是等待前一个方法执行完,才会执行后一个方法。
辅助对象的目的就是为了把所有函数都集中到同一个队列上,甚至可以直接用$("#div1")或者$(document)作为辅助对象,便于出列时统一对辅助对象操作。
jquery中利用队列依次执行动画的更多相关文章
- Jquery中的队列函数quene()、dequene()、clearQuene()
jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用.特别animate动画,ajax,以及timeout等需要一定时间的函数.Queue()和de ...
- python中利用队列asyncio.Queue进行通讯详解
python中利用队列asyncio.Queue进行通讯详解 本文主要给大家介绍了关于python用队列asyncio.Queue通讯的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery中利用JSONP解决AJAX跨域问题
写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...
- iOS多线程中,队列和执行的排列组合结果分析
本文是对以往学习的多线程中知识点的一个整理. 多线程中的队列有:串行队列,并发队列,全局队列,主队列. 执行的方法有:同步执行和异步执行.那么两两一组合会有哪些注意事项呢? 如果不是在董铂然博客园看到 ...
- jQuery使用伪递归重复执行动画
使用setInterval()来重复执行动画,会因为动画执行过程的时候,setInterval()的时间依然是在走的,所以会导致动画的调用时间不理想,因此只能使用递归来重复执行动画. // 首页LOG ...
- jQuery中ajax方法无法执行回调函数问题
最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...
- Laravel中利用队列发送邮件的方法示例
https://www.jb51.net/article/121647.htm 本文主要给大家介绍了关于Laravel中队列发送邮件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的 ...
- Jquery中click事件重复执行的问题
平常没注意事件绑定问题,在此注意一下: function testClick(obj){ $("select").off().on("click", funct ...
随机推荐
- Java相关错误
http://blog.csdn.net/pipisorry/article/details/51291063 使用hadoop jar ./Hw2Part1.jar /hw2/example-inp ...
- SpringMVC源码分析--容器初始化(三)HttpServletBean
在上一篇博客springMVC源码分析--容器初始化(二)DispatcherServlet中,我们队SpringMVC整体生命周期有一个简单的说明,并没有进行详细的源码分析,接下来我们会根据博客中提 ...
- JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...
- GrabCut in One Cut(基于图割算法grabcut的一次快速图像分割的OpenCV实现)----目前效果最好的图割
One cut in grabcut(grabcut算法的非迭代实现?) 本文针对交互式图像分割中的图割算法,主要想翻译一篇英文文献.不足之处请大家指正. 这是博主近期看到的效果最好,实现最简单 ...
- Android开发技巧——ViewPager衍生出来的2个类
1.不能左右滑动的ViewPager /* * Date: 14-7-28 * Project: Access-Control-V2 */ package cn.irains.access.v2.co ...
- [C++学习历程]Visual Studio 2010 中文旗舰版 安装
作者: 苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan/article/details/19765441 要开始学习C++了,先装个开发环境吧,没有选择最新的2 ...
- UNIX环境高级编程——管道和FIFO的额外属性
一个描述符能以两种方式设置成非阻塞. (1)调用open时可以指定O_NONBLOCK标志. writefd = open(FIFO1,O_WRONLY | O_NONBLOCK,0); (2)如果一 ...
- UML 类图. 对象图. 接口图. 用例图 .包,参与者. 依赖关系. 泛化/继承关系. 关联关系 .聚合/聚集关系. 实现关系 组合关系。
结构元素 结构元素包括,类,对象,接口,用例,参与者. 类图 类图图示 类图是UML中最基本的元素了吧?根据OO的思想"天下一切皆对象",而类是对象的抽象. 左 ...
- Linux编译Windows共享目录下代码
Linux编译Windows共享目录下代码(金庆的专栏)万神服务器代码是跨平台的.平时策划在Windows上开自己的服务器测试,测试和发布服务器为Linux.开发时,先在Windows上编译测试,再到 ...
- 调用sed命令的三种方式
调用sed命令的三种方式 调用sed有三种方式,一种为Shell命令行方式,另外两种是将sed命令写入脚本文件,然后执行该脚本文件. 三种方式的命令格式归纳如下: 一.在Shell命令行输入命令调用s ...