jQuery animate() 方法
示例
"Animate" an element, by changing its height
$("button").click(function(){
$("#box").animate({height: "300px"});
});
自己動手試一試 »
定義和用法
animate() 方法執行一組 CSS 屬性的自定義動畫。
此方法透過 CSS 樣式將元素從一種狀態變為另一種狀態。CSS 屬性值會逐漸改變，以建立動畫效果。
只有數值可以被動畫化（例如“margin:30px”）。字串值（例如“background-color:red”）不能被動畫化，但字串“show”、“hide”和“toggle”除外。這些值允許隱藏和顯示被動畫化的元素。
提示：對相對動畫使用 “+=“ 或 “-=“。
語法
(selector).animate({styles},speed,easing,callback)
| 引數 | 描述 |
|---|---|
| styles | 必需。指定一個或多個要動畫化的 CSS 屬性/值。 注意：在使用 animate() 方法時，屬性名稱必須使用駝峰命名法：您需要寫 paddingLeft 而不是 padding-left， marginRight 而不是 margin-right，等等。 可動畫化的屬性
只有數值可以被動畫化（例如“margin:30px”）。字串值（例如“background-color:red”）不能被動畫化，但字串“show”、“hide”和“toggle”除外。這些值允許隱藏和顯示被動畫化的元素。 |
| speed | 可選。指定動畫的速度。預設值為 400 毫秒。 可能的值
|
| easing | 可選。指定元素在動畫不同點時的速度。預設值為“swing”。可能的值
|
| callback | 可選。在動畫完成後執行的函式。要了解更多關於回撥函式的資訊，請閱讀我們的 jQuery 回撥函式章節。 |
替代語法
(selector).animate({styles},{options})
| 引數 | 描述 |
|---|---|
| styles | 必需。指定一個或多個要動畫化的 CSS 屬性/值（請參閱上面的可能值）。 |
| 選項 | 可選。指定動畫的附加選項。可能的值
|
自行嘗試 - 示例
使用 animate() 和回撥函式
如何使用 animate() 和一個重複動畫的回撥函式。
替代語法示例
使用替代語法指定多個動畫樣式和選項。
使用 animate() 建立進度條
如何使用 animate() 方法建立進度條。
為頁面錨點新增平滑滾動
如何使用 animate() 為連結新增平滑滾動。
