定義和用法
animate() 方法執行 CSS 屬性集的自定義動畫。
該方法通過 CSS 樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。
提示：請使用 "+=" 或 "-=" 來創建相對動畫。
語法
$(selector).animate({styles},speed,easing,callback)
參數
| 參數 | 必需的 | 描述 |
|---|---|---|
| styles | 是 |
規定產生動畫效果的一個或多個 CSS 屬性/值。
注意：當與 animate() 方法一起使用時，該屬性名稱必須是駝峰寫法： 您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。
可以應用動畫的屬性：
提示：顏色動畫不包含在核心 jQuery 庫中。如果您想要應用動畫顏色，您需要從 jQuery.com 下載 顏色動畫插件。
|
| speed | 否 |
規定動畫的速度。
可能的值：
|
| easing | 否 |
規定在動畫的不同點中元素的速度。默認值是 "swing"。
可能的值：
提示：擴展插件中提供更多可用的 easing 函數。
|
| callback | 否 |
animate 函數執行完之后，要執行的函數。
如需學習更多有關 callback 的內容，請訪問 jQuery Callback 。
|
實例
下例演示了animate()方法的簡單用法; 它將<div>元素向右移動，直到它達到250px的left屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎來到蝴蝶教程</title>
//此版本是百度cdn 1.11.1，當然你可以使用更高的版本，從2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。
如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
<div style="background:#009688;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
相關知識