=======可以自定義動畫效果的方法animate（）==========
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#d1{width:100px;height:100px;position:absolute;background-color:lightgreen;left:10px;top:40px;filter:alpha(opacity=0);}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
// 自定義動畫函數 參數：設置樣式 達到效果的事件 "不知道" 動畫執行完要做的事情
// 先執行非動畫 如設置樣式，若想讓樣式最後執行，要把設置的樣式放到最後一個參數function()中
$("#d1").animate({ "left": "300", "top": "300", "width": "200", "height": "200" }, 4000).animate({ "left": 800, "top": "50", "width": "100", "height": "140" }, 5000, function () {
$("#d1").css("display", "none");
});
});
// 向左
$("#btn2").click(function () {
$("#d1").animate({"left":"-=80"},1000);
});
// 向右
$("#btn3").click(function () {
$("#d1").animate({ "left": "+=80" }, 1000);
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="動畫" />
<input id="btn2" type="button" value="向左" />
<input id="btn3" type="button" value="向右" />
<div id="d1">
</div>
</body>
</html>