<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 队列的更多相关文章

  1. jQuery源代码解析(3)—— ready载入、queue队列

    ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...

  2. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

  3. 【原创经验分享】WCF之消息队列

    最近都在鼓捣这个WCF,因为看到说WCF比WebService功能要强大许多,另外也看了一些公司的招聘信息,貌似一些中.高级的程序员招聘,都有提及到WCF这一块,所以,自己也关心关心一下,虽然目前工作 ...

  4. js与jq对数组的操作

    一.数组处理 1.数组的创建  var arrayObj = new Array(); //创建一个数组  var arrayObj = new Array([size]); //创建一个数组并指定长 ...

  5. Oracle 中的作业队列和队列调度

    一,启动执行作业的进程       在 Oracle 中,是使用 “作业队列协调进程(CJQ0)” 这个协调数据库实例的作业队列的后台进程,来监视作业队列中的作业表(JOB$),并启动作业队列进程(J ...

  6. NodeJS系列~第三个小例子,NodeJs与Redis实现高并发的队列存储

    返回目录 众所周知 redis量个强大的缓存组件,可以部署在win32和linux环境之上,它有五大存储结构,其中有一种为列表list,它可以实现quene和stack的功能,即队列和堆栈的功能. r ...

  7. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. JQ库函数记忆要点

    1.核心(1.核心函数2.对象访问3.数据缓存4.队列控制4.插件机制5.多库共存) 2.属性(1.属性2.css类3.HTML代码/文本/值) 3.选择器(表单,表单对象属性,基本,内容,子元素,层 ...

  9. 【原】iOS多线程之异步任务+并行队列情况与异步任务+串行队列(主队列)情况

    异步任务+并行队列 把异步任务放到并行队列进行执行,异步任务会在不同的线程中执行. /*异步执行+并行队列*/ - (IBAction)clickBasic1:(UIButton *)sender { ...

随机推荐

  1. 模仿QQ左滑删除

    需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑 布局: <?xm ...

  2. HDU 4162 Shape Number (最小表示法)

    题意:给你一串n个数,求出循环来看一阶差的最小字典序:数字串看成一个顺时针的环,从某一点开始顺时针循环整个环,保证字典序最小就是答案 例如给你 2 1 3 就会得到(1-2+8 注意题意负数需要加8) ...

  3. Tomcat不输入项目名进入自己项目(根目录指向自己的项目)

    <Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...

  4. 期望+DP ZOJ 3929 Deque and Balls

    题目链接 题意:给你n个数,按照顺序依次放入一个双端队列(可放在头部,也可以放在尾部),求xi > xi+1的期望 * 2^n mod (1e9 +7) 分析:期望*2^n=出现这种排法的概率* ...

  5. spring mvc 解决后台传递值乱码问题

    在Web-xml 配置添加过滤器 <!-- 配置过滤器 解决乱码问题 --> <filter> <filter-name>CharacterEncodingFilt ...

  6. 疯狂java学习笔记之面向对象(五) - 封装、继承、多态

    一.封装: 封装的概念: - 合理的隐藏:隐藏不想被外界操作的Field.方法.构造器 - 合理的暴露:一般就是希望给别人调用的方法 e.g:显示器(按键暴露出来操作,但实际的东西/细节方法被隐藏起来 ...

  7. java synchronized修饰普通方法,修饰静态方法,修饰代码块,修饰线程run方法 比较

    synchronized用于多线程设计,有了synchronized关键字,多线程程序的运行结果将变得可以控制.synchronized关键字用于保护共享数据. synchronized实现同步的机制 ...

  8. 【转】Android之自定义Adapter的ListView

    http://www.cnblogs.com/topcoderliu/archive/2011/05/07/2039862.html 在开发中,我们经常使用到ListView这个控件.Android的 ...

  9. 201453408刘昊阳 《Java程序设计》第5周学习总结

    201453408刘昊阳 <Java程序设计>第5周学习总结 教材学习内容总结 第8章 异常处理 8.1 语法与继承结构 8.1.1 使用try.catch p227代码(Average) ...

  10. 纯JavaScripst的全选、全不选、反选 【转】

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...