您現(xiàn)在的位置： 365建站網(wǎng) > 建站教程 > jQuery 教程 > jQuery 效果 - animate() 方法

jQuery 效果 - animate() 方法

此節(jié)有 286 人學(xué)習(xí)過參與評(píng)論

實(shí)例

改變 "div" 元素的高度：

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

animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。

該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫效果。

只有數(shù)字值可創(chuàng)建動(dòng)畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動(dòng)畫（比如 "background-color:red"）。

注釋：使用 "+=" 或 "-=" 來創(chuàng)建相對(duì)動(dòng)畫（relative animations）。

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

參數(shù)	描述
styles	必需。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值。可能的 CSS 樣式值（提供實(shí)例）： 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"）來設(shè)置，而非 CSS 名稱（比如 "font-size"）。
speed	可選。規(guī)定動(dòng)畫的速度。默認(rèn)是 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast"
easing	可選。規(guī)定在不同的動(dòng)畫點(diǎn)中設(shè)置動(dòng)畫速度的 easing 函數(shù)。內(nèi)置的 easing 函數(shù)： swing linear 擴(kuò)展插件中提供更多 easing 函數(shù)。
callback	可選。animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。如需學(xué)習(xí)更多有關(guān) callback 的內(nèi)容，請(qǐng)?jiān)L問我們的 jQuery Callback 這一章。

$(selector).animate(styles,options)

參數(shù)	描述
styles	必需。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值（同上）。
options	可選。規(guī)定動(dòng)畫的額外選項(xiàng)。可能的值： speed - 設(shè)置動(dòng)畫的速度 easing - 規(guī)定要使用的 easing 函數(shù) callback - 規(guī)定動(dòng)畫完成之后要執(zhí)行的函數(shù) step - 規(guī)定動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù) queue - 布爾值。指示是否在效果隊(duì)列中放置動(dòng)畫。如果為 false，則動(dòng)畫將立即開始 specialEasing - 來自 styles 參數(shù)的一個(gè)或多個(gè) CSS 屬性的映射，以及它們的對(duì)應(yīng) easing 函數(shù)

參數(shù)

描述

styles

必需。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值（同上）。

options

可選。規(guī)定動(dòng)畫的額外選項(xiàng)。

可能的值：

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