<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
div {
background:#aaa;
width:18px;
height:18px;
position:absolute;
top:10px;
}
</style>
</head>
<body>
<div id="block1"></div>
<div id="block2"></div>
<script type="text/javascript">
var FUNC=[
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function(){alert("动画结束")}
];
var aniCB=function() {
$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC);
$(document).dequeue("myAnimation");
//清空队列
//$(document).queue("myAnimation",[]);
</script>
</body>
</html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
div {
background:#aaa;
width:18px;
height:18px;
position:absolute;
top:10px;
}
</style>
</head>
<body>
<div id="block1"></div>
<div id="block2"></div>
<script type="text/javascript">
var FUNC=[
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function(){alert("动画结束")}
];
var aniCB=function() {
$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC);
$(document).dequeue("myAnimation");
//清空队列
//$(document).queue("myAnimation",[]);
</script>
</body>
</html>