1.定義和用法
創建動畫：
animate(params,[speed],[callback])
參數：
paramas：表示一個包含屬性和值的映射，可以同時包含多個屬性，例如{left:"200px",top:"100px"}
speed：表示動畫運行的適度，參數規則同其他動畫效果的speed一致，它是一個可選參數
callback：表示一個回調函數，當動畫效果運行完畢后執行該回調函數，它也是一個可選參數
注意：
1.在使用animate()方法時，必須設置元素的定位屬性position為relative或absolute，元素才能動起來。如果沒有明確定義元素的定位屬性，並試圖使用animate()方法移動元素時，他們只會靜止不動
2.在animate()方法中可以使用屬性opacity來設置元素的透明度
3.如果在{left:"400px"}中的400px之間“+=”就表示在當前位置累加，“-=”就表示當前位置累減
停止動畫：
stop()方法屬於自定義動畫函數，它回停止匹配元素正在運行的動畫，並立即執行動畫隊列中的下一個動畫
stop(clearQueue,gotoEnd)
參數：
clearQueue：表示是否清空尚未執行完的動畫隊列（值為true時，表示清空動畫隊列）
gotoEnd：表示是否讓正在執行的動畫直接到達動畫結束時狀態（值為true時，表示直接到達動畫結束時狀態）
延遲動畫的執行
delay(時間)
判斷元素是否處於動畫狀態
if(元素節點).is(":animated")){}
示例：
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<button id="btn1">111111111111111111111start</button>
<button id="btn2">stop</button>
<button id="btn3">isAnimate</button>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("#box1")
// 執行動畫
$("#btn1").click(function(){
var a = $div.animate({left:"100px",top:"100px"},5000).delay(1000).animate({left:"200px"},5000,function(){
console.log("動畫執行結束")
})
// 停止動畫
$("#btn2").click(function(){
a.stop(false,false)
})
})
// 判斷是否執行動畫
$("#btn3").click(function(){
if($("#box1").is(":animated")){
console.log("動畫中......")
}
})
})
</script>
</body>
輸出：
