jQuery 效果 - animate() 方法

jQuery 效果參考手冊

實例

改變 "div" 元素的高度：

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

親自試一試

定義和用法

animate() 方法執行 CSS 屬性集的自定義動畫。

該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。

只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。

注釋：使用 "+=" 或 "-=" 來創建相對動畫（relative animations）。

語法 1

$(selector).animate(styles,speed,easing,callback)
參數 描述
styles

必需。規定產生動畫效果的 CSS 樣式和值。

可能的 CSS 樣式值（提供實例）：

注釋：CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。
speed

可選。規定動畫的速度。默認是 "normal"。

可能的值：

  • 毫秒 （比如 1500）
  • "slow"
  • "normal"
  • "fast"
easing

可選。規定在不同的動畫點中設置動畫速度的 easing 函數。

內置的 easing 函數：

  • swing
  • linear

擴展插件中提供更多 easing 函數。
callback

可選。animate 函數執行完之后，要執行的函數。

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

語法 2

$(selector).animate(styles,options)
參數 描述
styles 必需。規定產生動畫效果的 CSS 樣式和值（同上）。
options

可選。規定動畫的額外選項。

可能的值：

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

jQuery 效果參考手冊