標籤：
1、參數說明：
animate(params,[speed],[easing],[fn])
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合<br/>
speed:三種預定速度之一的字串("slow"600ms,"normal"400ms, or "fast"200ms)或表示動畫時間長度的毫秒數值(如：1000)<br/>
easing:要使用的擦除效果的名稱(需要外掛程式支援).預設jQuery提供"linear" 和 "swing".<br/>
fn:在動畫完成時執行的函數，每個元素執行一次。<br/>
2、注意點：
1、通過在屬性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 來讓元素做相對運動。如：left:"-50px"，表示相對位置左移動50px;
應該設定目標對象的position：relative這個屬性值，否則無效．
2、所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
3、所有的可建立動畫效果的屬性必須是一個單一的數值，例如 寬度(width)、高度(height)、左邊距（left）、透明度（opacity）等，
但是不能是background-color。
註：要實現顏色的動畫效果，必須使用 jQuery.Color() 外掛程式。除非特殊聲明，否則這些屬性的單位都按照像素處理，可以使用的其他單位還包括 em 和 % 百分比。
4、opacity："show"表示1或"hide"表示0或"0.4等小數"
3、範例程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>示範自訂animate方法效果</title>
<script src="../jQuery/jquery-3.1.0.min.js"></script>
<script>
$(function(){
$("#idleft").click(function(){
$("#idsection").animate({left:"+200px"},"slow");//在相對位置上向右頻移
})
$("#idheight").click(function(){
$("#idsection").animate({marginLeft:+200,height:200,width:200,borderWidth:50,fontSize:50,opacity:0.3},1000);//長度預設為像素單位
})
})
</script>
</head>
<body>
<h2>示範自訂animate方法效果</h2>
<input type="button" value="height" id="idheight">
<input type="button" value="left" id="idleft">
<section style="width:50px;height:50px;background-color:#999;position:relative" id="idsection">示範</section>
</body>
</html>
解析jQuery效果函數animate()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
