如果有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. linux内核中默认logo的具体位置

    /driver/logo/... 以下这个目录下对应的是logo的设置

  2. Swift基础之显示波纹样式

    最近项目用到了蓝牙连接,搜索设备的内容,其中需要搜索过程中出现波纹的动画效果,在这里将项目中OC语言编写的这种动画效果,转换成Swift编写,下面简单介绍说明一下代码. 这里用到了两种方法实现波纹效果 ...

  3. 如何解决RK3168或者RK系列MASKROM的问题

    不知道使用RK芯片的小伙伴有没有遇到我这样的问题,在用Android-Tool下载相应 IMG的时候,正常情况下,按电源键和音量+键应该出现loader下载模式,但是却出现MASKROM的字样,以前不 ...

  4. LCD 显示异常定位分析方法

    第一种情况: 进入kernel或android 后,如果LCM图像示异常,可以通过如下步骤来判断问题出现在哪个层面. step1:通过DMMS截图,来判断上面刷到LCM的数据是否有问题. 若DMMS获 ...

  5. 高性能nosql ledisdb设计与实现 (2):replication

    ledisdb现在已经支持replication机制,为ledisdb的高可用做出了保障. 使用 假设master的ip为10.20.187.100,端口6380,slave的ip为10.20.187 ...

  6. Android进阶(二十三)Android开发过程之实例讲解

    Android开发过程之实例讲解 前言 回过头来审视之前做过的Android项目,发觉自己重新开发时忽然间不知所措了,间隔了太长时间没有开发导致自己的Android技能知识急剧下降.温故而知新. 废话 ...

  7. TSVN客户端复制文件

    TSVN客户端复制文件 代码重构中,可能需要将一个大文件拆分成2个小文件,同时要保证拆分后的小文件继承原来的SVN历史记录. TSVN客户端只有Rename功能,没有Copy功能. 可进入Browse ...

  8. iOS中大流中的自定义cell 技术分享

    AppDelegate.m指定根视图 self.window.rootViewController = [[UINavigationController alloc] initWithRootView ...

  9. 【Android 系统开发】 编译 Android文件系统 u-boot 内核 并烧写到 OK-6410A 开发板上

    博客地址 : http://blog.csdn.net/shulianghan/article/details/40299813  本篇文章中用到的工具源码下载 : -- ok-6410A 附带的 A ...

  10. 【翻译】如何在Ext JS 6中使用Fashion美化应用程序

    原文:How to Style Apps with Fashion in Ext JS 6 在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的 ...