學習了jQuery動畫效果後，感覺animate方法的功能還是很強大的，當然，我接下來的這段代碼也只算是淺嘗輒止，後面會隨着學習的深入會不斷提高動畫效果和代碼質量，希望各位大神指點。
這段代碼是在樣例的基礎上進行了修改，實現了四個方塊的轉動，並最終回到起始位置。這裏面主要是用到了animate方法的隊列功能，同時也要注意div塊的position屬性的設置，爲fixed，absolute或relative。
接下來爲完整源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").animate({top:'300px',opacity:'0.4'},"slow");
$("#div1").animate({left:'206px',opacity:'0.8'},"slow");
$("#div1").animate({top:'100px',opacity:'0.4'},"slow");
$("#div1").animate({left:'6px',opacity:'0.8'},"slow");
$("#div2").animate({left:'206px',opacity:'0.4'},"slow");
$("#div2").animate({top:'100px',opacity:'0.8'},"slow");
$("#div2").animate({left:'6px',opacity:'0.4'},"slow");
$("#div2").animate({top:'300px',opacity:'0.8'},"slow");
$("#div3").animate({top:'100px',opacity:'0.4'},"slow");
$("#div3").animate({left:'6px',opacity:'0.8'},"slow");
$("#div3").animate({top:'300px',opacity:'0.4'},"slow");
$("#div3").animate({left:'206px',opacity:'0.8'},"slow");
$("#div4").animate({left:'6px',opacity:'0.4'},"slow");
$("#div4").animate({top:'300px',opacity:'0.8'},"slow");
$("#div4").animate({left:'206px',opacity:'0.4'},"slow");
$("#div4").animate({top:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。
如果需要改變爲，我們需要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;top:100px;">
</div>
<div id="div2" style="background:#672821;height:100px;width:100px;position:absolute;top:300px">
</div>
<div id="div3" style="background:#bbb736;height:100px;width:100px;position:absolute;top:300px;left:206px;">
</div>
<div id="div4" style="background:#ffc629;height:100px;width:100px;position:absolute;left:206px;top:100px">
</div>
</body>
</html>
接下來爲效果圖：
四個方塊按箭頭方向同時轉動，伴隨透明效果，每個div塊最終會回到起始位置，動畫結束。