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 ...
随机推荐
- linux内核中默认logo的具体位置
/driver/logo/... 以下这个目录下对应的是logo的设置
- Swift基础之显示波纹样式
最近项目用到了蓝牙连接,搜索设备的内容,其中需要搜索过程中出现波纹的动画效果,在这里将项目中OC语言编写的这种动画效果,转换成Swift编写,下面简单介绍说明一下代码. 这里用到了两种方法实现波纹效果 ...
- 如何解决RK3168或者RK系列MASKROM的问题
不知道使用RK芯片的小伙伴有没有遇到我这样的问题,在用Android-Tool下载相应 IMG的时候,正常情况下,按电源键和音量+键应该出现loader下载模式,但是却出现MASKROM的字样,以前不 ...
- LCD 显示异常定位分析方法
第一种情况: 进入kernel或android 后,如果LCM图像示异常,可以通过如下步骤来判断问题出现在哪个层面. step1:通过DMMS截图,来判断上面刷到LCM的数据是否有问题. 若DMMS获 ...
- 高性能nosql ledisdb设计与实现 (2):replication
ledisdb现在已经支持replication机制,为ledisdb的高可用做出了保障. 使用 假设master的ip为10.20.187.100,端口6380,slave的ip为10.20.187 ...
- Android进阶(二十三)Android开发过程之实例讲解
Android开发过程之实例讲解 前言 回过头来审视之前做过的Android项目,发觉自己重新开发时忽然间不知所措了,间隔了太长时间没有开发导致自己的Android技能知识急剧下降.温故而知新. 废话 ...
- TSVN客户端复制文件
TSVN客户端复制文件 代码重构中,可能需要将一个大文件拆分成2个小文件,同时要保证拆分后的小文件继承原来的SVN历史记录. TSVN客户端只有Rename功能,没有Copy功能. 可进入Browse ...
- iOS中大流中的自定义cell 技术分享
AppDelegate.m指定根视图 self.window.rootViewController = [[UINavigationController alloc] initWithRootView ...
- 【Android 系统开发】 编译 Android文件系统 u-boot 内核 并烧写到 OK-6410A 开发板上
博客地址 : http://blog.csdn.net/shulianghan/article/details/40299813 本篇文章中用到的工具源码下载 : -- ok-6410A 附带的 A ...
- 【翻译】如何在Ext JS 6中使用Fashion美化应用程序
原文:How to Style Apps with Fashion in Ext JS 6 在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的 ...