jQuery animate() 方法

jQuery 效果方法 jQuery 效果方法

實例

通過改變元素的高度,對元素應用動畫:

$("button").click(function(){ $("#box").animate({height:"300px"}); });


定義和用法

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 可選。規定動畫的速度。

可能的值:

  • 毫秒
  • "slow"
  • "fast"
easing 可選。規定在動畫的不同點中元素的速度。默認值是 "swing"。

可能的值:

  • "swing" - 在開頭/結尾移動慢,在中間移動快
  • "linear" - 勻速移動
提示:擴展插件中提供更多可用的 easing 函數。
callback 可選。animate 函數執行完之後,要執行的函數。

如需學習更多有關 callback 的內容,請訪問我們的 jQuery Callback 這一章。


Alternate 語法

(selector).animate({styles},{options})

參數 描述
styles 必需。規定產生動畫效果的一個或多個 CSS 屬性/值(同上)。
options 可選。規定動畫的額外選項。

可能的值:

  • speed - 設置動畫的速度
  • easing - 規定要使用的 easing 函數
  • callback - 規定動畫完成之後要執行的函數
  • step - 規定動畫的每一步完成之後要執行的函數
  • queue - 布爾值。指示是否在效果佇列中放置動畫。如果為 false,則動畫將立即開始。
  • specialEasing - 來自 styles 參數的一個或多個 CSS 屬性的映射,以及它們的對應 easing 函數


實例

嘗試一下 - 實例


如何使用帶有回調函數的 animate() 來重複動畫。


jQuery 效果方法 jQuery 效果方法