JQuery動畫實現的注意點：
1、JQuery 定義了 fadeIn() 和 fadeOut() 等簡單方法來實現常見的視覺效果，還定義了一個 animate() 方法來實現更復雜的自定義動畫
2、JQuery 動畫是異步的，動畫方法會在動畫完成之前返回
3、JQuery 動畫方法常使用動畫時長（用毫秒數值或字符串來表示）作為第一個可選參數，忽略時長參數或指定時長JQuery無法識別時會采用默認值 400ms，字符串 "fast" 表示 200ms、"slow" 表示 600ms。同時，我們可以通過JQuery.fx.speeds["new speed"] = speed 來定義新的時長名字以及其數值
4、JQuery 動畫默認是隊列化的，即如果已有一個動畫在執行，新的動畫需要等當前動畫執行完才能執行
5、stop([bool], [bool]) 方法用來停止當前正在執行的任何動畫，第一個可選參數為 true ，則會清除選中元素上的元素隊列，並取消任何等待執行的動畫，為 false 時則不會取消等待執行的動畫；第二個可選參數為 true 時會讓指定元素停止到最終值，而 false 則會讓元素狀態停止在它被觸發時的狀態
6、delay(speed, [queueName]) 方法直接添加一個時間延遲到動畫隊列里，第一個參數是時長，第二個參數是隊列名（通常不需要）
常用JQuery動畫方法：
1、淡入淡出：fadeIn([speed], [callback])、fadeOut([speed], [callback])、fadeTo(speed, opacity, [callback])，fadeTo() 會將當前 opacity 值變化到目標值,可選參數 speed 表示動畫持續時長；可選參數 callback 表示回調函數（即動畫執行后調用的函數）
2、隱藏與顯示：show([speed])、hide([speed])、toggle([speed], [bool])，toggle 讓元素在 show 和 hide 之間切換
3、滑動：slideDown([speed], [callback])、slideUp([speed], [callback])、slideToggle([speed], [callback])，slideToggle 在上滑和下滑之間切換
4、JQuery 的 animate() 方法定義：$("selector").animate({params}, [speed, callback])，其中 selector 表示選擇文檔的內容（可以是CSS選擇器）；params 是一個對象且該對象的屬性名必須是 CSS 屬性名（支持小駝峰，若屬性名包含中划線“-”，則需要使用引號括起來），屬性的值必須是動畫的目標值
注：默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!
動畫只支持數值屬性，對於顏色、字體或 display 等枚舉屬性無法實現動畫效果，但我們可以傳入自定義的 CSS 屬性變化函數來支持非數值動畫
fadeOut() 會讓元素看不見，但其在文檔里的布局仍然保存着，而 hide() 則會讓元素從布局中移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
// 引入 JQuery 庫
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
// 通過 $(function) 來執行 JQuery 代碼
$(function () {
$("#button1").click(function () {
//animate({params},[speed,callback]);
$("#div1").animate({height:'300px', opacity:'0.8'});
$("#div1").animate({width:'300px', opacity:'0.4'});
$("#div1").animate({height:'100px', opacity:'0.8'});
$("#div1").animate({width:'100px', opacity:'1'}, function () {
alert("Hello Animate");
});
});
$("#button2").click(function () {
$("#div1").stop(true, true);
});
$("#button3").click(function () {
$("#div2").animate({left: '200px', fontSize: '2em', textAlign: 'center'});
});
$("#button4").click(function () {
$("#div2").animate({left: '0px', fontSize: '1em', textAlign: 'left'});
});
});
</script>
</head>
<p>
<button id="button1">開始動畫</button> <button id="button2">停止動畫</button>
<p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:fixed;">
</div><br/><br/><br/><br/><br/><br/><br/>
<button id="button3">開始運動</button> <button id="button4">恢復原狀態</button><br/><br/>
<div id="div2" style="background-color: #98bf21; height: 100px; width: 100px; position: fixed;">
Hello World
</div>
</body>
</html>