如果有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中利用队列依次执行动画的更多相关文章

  1. Jquery中的队列函数quene()、dequene()、clearQuene()

    jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用.特别animate动画,ajax,以及timeout等需要一定时间的函数.Queue()和de ...

  2. python中利用队列asyncio.Queue进行通讯详解

    python中利用队列asyncio.Queue进行通讯详解 本文主要给大家介绍了关于python用队列asyncio.Queue通讯的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细 ...

  3. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  4. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  5. iOS多线程中,队列和执行的排列组合结果分析

    本文是对以往学习的多线程中知识点的一个整理. 多线程中的队列有:串行队列,并发队列,全局队列,主队列. 执行的方法有:同步执行和异步执行.那么两两一组合会有哪些注意事项呢? 如果不是在董铂然博客园看到 ...

  6. jQuery使用伪递归重复执行动画

    使用setInterval()来重复执行动画,会因为动画执行过程的时候,setInterval()的时间依然是在走的,所以会导致动画的调用时间不理想,因此只能使用递归来重复执行动画. // 首页LOG ...

  7. jQuery中ajax方法无法执行回调函数问题

    最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...

  8. Laravel中利用队列发送邮件的方法示例

    https://www.jb51.net/article/121647.htm 本文主要给大家介绍了关于Laravel中队列发送邮件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的 ...

  9. Jquery中click事件重复执行的问题

    平常没注意事件绑定问题,在此注意一下: function testClick(obj){ $("select").off().on("click", funct ...

随机推荐

  1. Java相关错误

    http://blog.csdn.net/pipisorry/article/details/51291063 使用hadoop jar ./Hw2Part1.jar /hw2/example-inp ...

  2. SpringMVC源码分析--容器初始化(三)HttpServletBean

    在上一篇博客springMVC源码分析--容器初始化(二)DispatcherServlet中,我们队SpringMVC整体生命周期有一个简单的说明,并没有进行详细的源码分析,接下来我们会根据博客中提 ...

  3. JavaScript实现的网页放大镜效果

    今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...

  4. GrabCut in One Cut(基于图割算法grabcut的一次快速图像分割的OpenCV实现)----目前效果最好的图割

     One cut in grabcut(grabcut算法的非迭代实现?) 本文针对交互式图像分割中的图割算法,主要想翻译一篇英文文献.不足之处请大家指正. 这是博主近期看到的效果最好,实现最简单 ...

  5. Android开发技巧——ViewPager衍生出来的2个类

    1.不能左右滑动的ViewPager /* * Date: 14-7-28 * Project: Access-Control-V2 */ package cn.irains.access.v2.co ...

  6. [C++学习历程]Visual Studio 2010 中文旗舰版 安装

    作者: 苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan/article/details/19765441 要开始学习C++了,先装个开发环境吧,没有选择最新的2 ...

  7. UNIX环境高级编程——管道和FIFO的额外属性

    一个描述符能以两种方式设置成非阻塞. (1)调用open时可以指定O_NONBLOCK标志. writefd = open(FIFO1,O_WRONLY | O_NONBLOCK,0); (2)如果一 ...

  8. UML 类图. 对象图. 接口图. 用例图 .包,参与者. 依赖关系. 泛化/继承关系. 关联关系 .聚合/聚集关系. 实现关系 组合关系。

    结构元素 结构元素包括,类,对象,接口,用例,参与者. 类图 类图图示      类图是UML中最基本的元素了吧?根据OO的思想"天下一切皆对象",而类是对象的抽象.      左 ...

  9. Linux编译Windows共享目录下代码

    Linux编译Windows共享目录下代码(金庆的专栏)万神服务器代码是跨平台的.平时策划在Windows上开自己的服务器测试,测试和发布服务器为Linux.开发时,先在Windows上编译测试,再到 ...

  10. 调用sed命令的三种方式

    调用sed命令的三种方式 调用sed有三种方式,一种为Shell命令行方式,另外两种是将sed命令写入脚本文件,然后执行该脚本文件. 三种方式的命令格式归纳如下: 一.在Shell命令行输入命令调用s ...