首页 > 代码库 > animate学习
animate学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
startAnimation();
endAnimation();
showQueue();
function startAnimation(){
$("#d1").animate({height:300},"slow",startAnimation);
$("#d1").animate({width:300},"slow",startAnimation);
$("#d1").animate({height:100},"slow",startAnimation);
$("#d1").animate({width:100},"slow",startAnimation);
}
function endAnimation(){
$("#d2").animate({height:100},"slow",endAnimation);
$("#d2").animate({width:200},"slow",endAnimation);
$("#d2").animate({height:300},"slow",endAnimation);
$("#d2").animate({width:400},"slow",endAnimation);
}
function showQueue(){
var q=div.queue();
$("span").text(q.length);
setTimeout(showQueue);
}
console.log("showQueue",showQueue);
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>对列长度为: <span></span></p>
<div id="d1" style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:black;"></div>
<div id="d2" style="width:50px;height:50px;position:absolute;left:10px;top:200px;background-color:red;"></div>
</body>
</html>
animate学习