jQuery 效果 - animate() 方法

實例

改變 "div" 元素的高度：

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

親自試一試

定義和用法

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

該方法經過CSS樣式將元素從一個狀態改變爲另外一個狀態。CSS屬性值是逐漸改變的，這樣就能夠建立動畫效果。

只有數字值可建立動畫（好比 "margin:30px"）。字符串值沒法建立動畫（好比 " padding: 0px; border: 0px; line-height: 21px;">註釋：使用 "+=" 或 "-=" 來建立相對動畫（relative animations）。

語法 1

$(selector).animate(styles,speed,easing,callback)

參數	描述
styles	必需。規定產生動畫效果的 CSS 樣式和值。 可能的 CSS 樣式值（提供實例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 註釋：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 函數