<! DOCTYPE html>
<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>
<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 = [//All animations are stored inside the array
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 ("End of Animation")}
];
$ (document). Queue ("Myanimation", FUNC);//assign animated array to myanimation under $ (document)
var ANICB = function ()
{
$ (document). Dequeue ("myanimation");//Use dequeue to perform the next function
};
$ (". L1"). Animate ({top: "570"}, ANICB);//Executes the first set, and a callback
$ ("button"). Click (function () {//click Clear Queue
$ (document). Clearqueue (' myanimation ');
})
});
</script>
</body>
Qquery Queuing Animation Queue () dequeue () Clearqueue ()
