<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<style type="text/css">
.box{border:1px solid red;width:600px;height: 300px;margin:30px auto;position: relative;}
.box div{position: absolute;top:0;width:10px;height:10px;background:blueviolet;}
.l1{left:20px;}
.l2{left:70px;}
.l3{left:120px;}
.l4{left:170px;}
.l5{left:220px;}
.l6{left:270px;}
.l7{left:320px;}
</style>
</head>
<body>
<button>stop</button>
<div class="box">
<div class="l1"></div>
<div class="l2"></div>
<div class="l3"></div>
<div class="l4"></div>
<div class="l5"></div>
<div class="l6"></div>
</div>
<script type="text/javascript">
$(function(){
var FUNC = [//把所有动画都存到数组里面
function () { $(".l1").animate({ top: "570" }, aniCB); },
function () { $(".l2").animate({ top: "570" }, aniCB); },
function () { $(".l3").animate({ top: "570" }, aniCB); },
function () { $(".l4").animate({ top: "570" }, aniCB); },
function () { $(".l5").animate({ top: "570" }, aniCB); },
function () { $(".l6").animate({ top: "570" }, aniCB); },
function () { alert("动画结束") }
];
$(document).queue("myAnimation", FUNC);//把动画数组赋值给$(document)下的myAnimation
var aniCB = function ()
{
$(document).dequeue("myAnimation");//用dequeue来执行下一个函数
};
$(".l1").animate({ top: "570" }, aniCB);//执行第一个定好，并且回调
$("button").click(function(){//点击清除队列
$(document).clearQueue(‘myAnimation‘);
})
});
</script>
</body>
</html>