jQuery动画队列

动画队列

队列的作用就是让我们把一个又一个的任务放到一起，确保只有当前面的任务完成了，才会开始下一个任务。这里面的任务可以是同步的，也可以是异步的。

jQuery的动画系统就是执行一个函数队列。对jQuery元素应用fade,slide,animate等动画，都会默认将函数压入一个fx的队列。在我们使用jQuery的animate()的时候，我们可以在option参数中传入一个queue的标志位来决定这个动画时候压入当前元素的动画队列。如果为false,则不等待当前队列完成，而是立即执行该动画。

---

方法

jQuery提供了以下几种方法来操作动画队列:

queue( [ queueName ], callback( next ) )

queue()方法用来显示在匹配的元素上的已经执行的函数队列

• queueName：一个含有队列名的字符串。默认是fx，标准的动画队列
• callback(next)：添加到队列的新函数

---

dequeue([queueName])

dequeue()方法用来执行匹配元素队列的下一个函数

• queueName：一个含有队列名的字符串。默认是fx，标准的动画队列

---

clearQueue([queueName])

clearQueue()方法用于清除动画队列中未执行的动画，并不影响当前动画效果（即正在进行的动画不受影响），当重新执行时，动画队列重新开始，但已经执行过的队列，不会再显示效果

• queueName：一个含有队列名的字符串。默认是fx，标准的动画队列

---

finish()

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

---

stop([clearQueue ][, jumpToEnd ])

停止当前正在运行的动画

• 参数为空：停止当前动画，执行动画队列中的下一个动画
• [clearQueue ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，影响动画效果
• [, jumpToEnd ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，并直接跳到本次动画的结束

---

示例

下面直接看代码：

    
    
    
    
    



    show
    hide
    fadeIn
    fadeOut
    slideDown
    slideUp
    普通嵌套写法 地狱回调
    jQuery动画队列回调
    

        

        
    
    

    

    
    

效果预览demo：动画队列demo