animate
英[ˈænɪmeɪt] 美[ˈænəˌmet]
vt.使有生氣;驅動;使栩栩如生地動作;給予…以生命
#vt.使有生氣;驅動;使栩栩如生地動作;賦予…以生命
###adj.有生命的;活的;有生氣的;生氣勃勃的###jquery animate() 方法 語法
作用：animate() 方法執行 CSS 屬性集的自訂動畫。此方法透過CSS樣式將元素從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的，這樣就可以創造出動畫效果。只有數字值可建立動畫（例如 "margin:30px"）。字串值無法建立動畫（例如 "background-color:red"）。使用 " =" 或 "-=" 來建立相對動畫（relative animations）。
語法1：$(selector).animate(styles,speed,easing,callback)
參數：
| #參數 | 描述 |
| styles | 必要。規定產生動畫效果的 CSS 樣式和值。 |
| speed | 可選。規定動畫的速度。預設是 "normal"。可能的值：毫秒 （例如 1500） "slow" "normal" "fast" |
| easing | #可選。規定在不同的動畫點中設定動畫速度的 easing 函數。內建的 easing 函數：swing linear擴充插件中提供更多 easing 函數。 |
| callback | 可選。 animate 函數執行完之後，要執行的函數。 |
語法2：$(selector).animate(styles,options)
參數：
| 參數 | 說明 |
| styles | #必要。規定產生動畫效果的 CSS 樣式和值（同上）。 |
| options | 可選。規定動畫的額外選項。可能的值：speed - 設定動畫的速度 easing - 規定要使用的 easing 函數 callback - 規定動畫完成後要執行的函數 step - 規定動畫的每一步完成之後要執行的函數 queue - 布林值。指示是否在效果佇列中放置動畫。如果為 false，則動畫將立即開始 specialEasing - 來自 styles 參數的一個或多個 CSS 屬性的映射，以及它們的對應 easing 函數 |
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>#點擊 "執行實例" 按鈕查看線上實例