学习了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块最终会回到起始位置，动画结束。