动画队列主要用到jQuery的queue、dequeue和clearqueue。
1.queue（）函数主要是将一个动画函数数组绑定到一个队列上
2.dequeue（）函数主要是执行队列的第一个函数，并从队列中删除。
3.clearqueue（）函数是清除动画队列。
<!DOCTYPE html>
<html>
<head>
<title>queue</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
img{
width:400px;
height:300px;
position: absolute;
bottom:100px;
right:100px;
}
</style>
</head>
<body>
<!-- 设置五幅图片 -->
<div> <img src="img/1.jpg" alt="图片1" class="one">
<img src="img/2.jpg" alt="图片2" class="two">
<img src="img/3.jpg" alt="图片3" class="three">
<img src="img/4.jpg" alt="图片4" class="four">
<img src="img/5.jpg" alt="图片5" class="five"> </div>
<script type="text/javascript">
$(function(){
//创建函数数组aniList，定义动画队列的执行顺序（按照函数数组的indexof）。
var aniList = [
function(){
$('.one').delay(500).animate({right : "+=800px" ,bottom : "+=600"},1000,nextQueue)
}
,
function(){
$('.two').delay(500).animate({right : "+=640px" ,bottom : "+=480"},1000,nextQueue)
}
,
function(){
$('.three').delay(500).animate({right : "+=480px" ,bottom : "+=360"},1000,nextQueue)
}
,
function(){
$('.four').delay(500).animate({right : "+=320px" ,bottom : "+=240"},1000,nextQueue)
}
,
function(){
$('.five').delay(500).animate({right : "+=160px",bottom : "+=120"},1000,nextQueue)
}
];
//将队列名称定义为aniName
$('div').queue('aniName',aniList);
//取出动画队列aniName的第一个动画函数并执行
var nextQueue = function(){
$('div').dequeue('aniName');
};
nextQueue(); $("<button>right</button>")
.appendTo('body').bind("click",function(){
//清除动画队列。
$('div').clearQueue('aniName');
return false;
})
})
</script>
</body>
</html>