如果有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. 【Unity Shaders】使用CgInclude让你的Shader模块化——使用#define指令创建Shader

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  2. 使用maven将项目打成jar包

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  3. JAVA之旅(三十)——打印流PrintWriter,合并流,切割文件并且合并,对象的序列化Serializable,管道流,RandomAccessFile,IO其他类,字符编码

    JAVA之旅(三十)--打印流PrintWriter,合并流,切割文件并且合并,对象的序列化Serializable,管道流,RandomAccessFile,IO其他类,字符编码 三十篇了,又是一个 ...

  4. 《java入门第一季》模拟用户登陆注册案例集合版

    需求:校验用户名和密码,登陆成功后玩猜数字小游戏. 在这里先写集合版.后面还有IO版.数据库版. 一.猜数字小游戏类: 猜数字小游戏的代码见博客:http://blog.csdn.net/qq_320 ...

  5. javascript之JSON引入

    JSON: JavaScript Object Notation   JavaScript 对象表示法. 由于现在很多在服务器获取数据,很多都涉及json数据格式,因此学习json非常有必要. * 语 ...

  6. ReactJs和React Native的那些事

    介绍 1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会 ...

  7. MySQL学习笔记_3_MySQL创建数据表(中)

    MySQL创建数据表(中) 三.数据字段属性 1.unsigned[无符号] 可以让空间增加一倍 比如可以让-128-127增加到0-255 注意:只能用在数值型字段 2.zerofill[前导零] ...

  8. 第二篇、vlc-android之源码介绍

    注明 转载请注明出处:http://blog.csdn.net/cuiran/article/details/35987853 正文 继<第一篇.vlc-android之开篇介绍> htt ...

  9. iOS开发经验相关知识

    一. iPhone Size 手机型号 屏幕尺寸 iPhone 4 4s 320 * 480 iPhone 5 5s 320 * 568 iPhone 6 6s 375 * 667 iphone 6 ...

  10. Android调用binder实现权限提升-android学习之旅(81)

    当进程A权限较低,而B权限较高时,容易产生提权漏洞 fuzz测试的测试路径 First level Interface是服务 Second level Interface是服务中对应的接口 1.首先获 ...