animate
英 [??n?me?t] 美 [??n??met]
vt.使有生氣;驅(qū)動;使栩栩如生地動作;賦予…以生命
adj.有生命的;活的;有生氣的;生氣勃勃的
jquery animate()方法 語法
作用：animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果。只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）。使用 "+=" 或 "-=" 來創(chuàng)建相對動畫（relative animations）。
語法1：$(selector).animate(styles,speed,easing,callback)
參數(shù)：
| 參數(shù) | 描述 |
| styles | 必需。規(guī)定產(chǎn)生動畫效果的 CSS 樣式和值。 |
| speed | 可選。規(guī)定動畫的速度。默認(rèn)是 "normal"?？赡艿闹担汉撩?（比如 1500） "slow" "normal" "fast" |
| easing | 可選。規(guī)定在不同的動畫點(diǎn)中設(shè)置動畫速度的 easing 函數(shù)。內(nèi)置的 easing 函數(shù)：swing linear擴(kuò)展插件中提供更多 easing 函數(shù)。 |
| callback | 可選。animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。 |
語法2：$(selector).animate(styles,options)
參數(shù)：
| 參數(shù) | 描述 |
| styles | 必需。規(guī)定產(chǎn)生動畫效果的 CSS 樣式和值（同上）。 |
| options | 可選。規(guī)定動畫的額外選項(xiàng)?？赡艿闹担簊peed - 設(shè)置動畫的速度 easing - 規(guī)定要使用的 easing 函數(shù) callback - 規(guī)定動畫完成之后要執(zhí)行的函數(shù) step - 規(guī)定動畫的每一步完成之后要執(zhí)行的函數(shù) queue - 布爾值。指示是否在效果隊(duì)列中放置動畫。如果為 false，則動畫將立即開始 specialEasing - 來自 styles 參數(shù)的一個(gè)或多個(gè) CSS 屬性的映射，以及它們的對應(yīng) easing 函數(shù) |
jquery animate()方法 示例
<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
