JQ 队列
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
.divtt
{
position: relative;
width: 150px;
height: 150px;
border: 1px solid black;
float: left;
margin-left: 10px;
margin-top: 10px;
overflow: hidden;
}
.divtest
{
position: absolute;
width: 150px;
height: 150px;
opacity: 0.3;
top: 0px;
left: -150px;
background-color: black;
}
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
<div class="divtt">
<div class="divtest"></div>
</div>
var div1 = $(".divtt").find(".divtest")
var FUNC = [
function () { div1.eq(0).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(1).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(2).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(3).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(4).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(5).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(6).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(7).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(8).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(9).animate({ left: "150px" }, 200, aniCB); },
function () { div1.eq(9).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(8).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(7).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(6).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(5).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(4).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(3).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(2).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(1).animate({ left: "-150px" }, 200, aniCB); },
function () { div1.eq(0).animate({ left: "-150px" }, 200, aniCB); },
];
var aniCB = function () {
$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation", FUNC);
aniCB()
JQ 队列的更多相关文章
- jQuery源代码解析(3)—— ready载入、queue队列
ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- 【原创经验分享】WCF之消息队列
最近都在鼓捣这个WCF,因为看到说WCF比WebService功能要强大许多,另外也看了一些公司的招聘信息,貌似一些中.高级的程序员招聘,都有提及到WCF这一块,所以,自己也关心关心一下,虽然目前工作 ...
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
- Oracle 中的作业队列和队列调度
一,启动执行作业的进程 在 Oracle 中,是使用 “作业队列协调进程(CJQ0)” 这个协调数据库实例的作业队列的后台进程,来监视作业队列中的作业表(JOB$),并启动作业队列进程(J ...
- NodeJS系列~第三个小例子,NodeJs与Redis实现高并发的队列存储
返回目录 众所周知 redis量个强大的缓存组件,可以部署在win32和linux环境之上,它有五大存储结构,其中有一种为列表list,它可以实现quene和stack的功能,即队列和堆栈的功能. r ...
- 今天讲的是JQ 的动画效果
老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- JQ库函数记忆要点
1.核心(1.核心函数2.对象访问3.数据缓存4.队列控制4.插件机制5.多库共存) 2.属性(1.属性2.css类3.HTML代码/文本/值) 3.选择器(表单,表单对象属性,基本,内容,子元素,层 ...
- 【原】iOS多线程之异步任务+并行队列情况与异步任务+串行队列(主队列)情况
异步任务+并行队列 把异步任务放到并行队列进行执行,异步任务会在不同的线程中执行. /*异步执行+并行队列*/ - (IBAction)clickBasic1:(UIButton *)sender { ...
随机推荐
- hdu 2191 多重背包
悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & ...
- 各浏览器抗uaf机制
今年中旬,微软针对旗下ie浏览器中大量出现的uaf漏洞,对ie浏览器的安全机制进行了一个大幅度的升级,其中主要体现为隔离堆及延迟释放两个机制,顿时又将uaf漏洞的利用向上提升了一个大坎, 但是类似的对 ...
- 廖雪峰js教程笔记10 浏览器对象
JavaScript可以获取浏览器提供的很多对象,并进行操作. window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属 ...
- iOS10 UI教程子视图和父视图UI层次结构和Views继承
iOS10 UI教程子视图和父视图UI层次结构和Views继承 iOS10 UI教程子视图和父视图UI层次结构和Views继承,本节将讲解与UI层次结构和Views继承相关的内容,其中包括子视图和父视 ...
- 同步、更新、下载Android Source & SDK from 国内镜像站
转自: 同步.更新.下载Android Source & SDK from 国内镜像站 Download the android source from china mirrors 以 ...
- Java类加载
类的生命周期是: 在一个类编译完成之后,下一步就需要开始使用类,如果要使用一个类,肯定离不开JVM.在程序执行中JVM通过装载,链接,初始化这3个步骤完成. 类的装载是通过类加载器完成的,加载器将.c ...
- BZOJ3257 : 树的难题
设$f[x][i][j]$表示以$x$为根的子树,与$x$连通部分有$i$个黑点,$j$个白点,不联通部分都是均衡的最小代价.若$i>1$,则视作$1$:若$j>2$,则视作$2$. 然后 ...
- Hadoop Streaming框架使用(一)
Streaming简介 link:http://www.cnblogs.com/luchen927/archive/2012/01/16/2323448.html Streaming框架允许任何程 ...
- 20145304 Java第四周学习报告
20145304<Java程序设计>第四周学习总结 教材学习内容总结 1.继承共同行为: 继承基本上就是避免多个类间重复定义共同行为,关键词为extends. 代码如下: //继承共同行为 ...
- ACM: HDU 1285 确定比赛名次 - 拓扑排序
HDU 1285 确定比赛名次 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u De ...