最近在學習jQuery，看到一個很有意思的函數animate()，但是在網上卻沒有查到相關的詳細資料，於是打算參考jQuery API，自己總結一下。
概述
animate() 方法執行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
用法一
$(selector).animate({styles},speed,easing,callback) //創建自定義動畫
styles: 必需，定義形成動畫的css屬性。需要使用駝峰法書寫所有的屬性名，如paddingLeft而不是padding-left。也可以定義相對值，即相對於元素當前值做改變。需要在指的前面加上 +=或者-=。還可以使用預定義值，屬性的動畫值設置為 show/hide/toggle。
speed: 可選，定義效果的時長。可取值slow、normal(默認)、fast 或者毫秒數。
easiing: 可選，定義在不同動畫點中設置動畫速度。內置的easing函數有：swing（緩沖，默認值）、linear（勻速），可通過js文件擴展。
callback:可選，定義在動畫完成后所執行的函數名稱。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定義動畫animate()</title> 6 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 7 </head> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $('button').click(function(){ 11 $('div').animate({ 12 height:"300px", 13 width:"+=100px", // 相對值 14 //:"width":"hide" //預定義值 15 }, 16 "slow", 17 "linear", 18 function(){ 19 alert("高度為："+ $("div").height()) 20 }); 21 }); 22 }) 23 24 </script> 25 26 <body> 27 <button>開始動畫</button> 28 <!-- 默認所有的HTML 元素都有一個靜態位置，且無法移動。如需要對位置進行操作，要先把元素的position屬性 --> 29 <div style="background:red;height:100px;width:100px;position:absolute;"> 30 </div> 31 32 </body> 33 </html>
用法二
$(selector).animate({styles},{options})
styles: 必需，定義形成動畫的css屬性。用法同上
optins: 可選，定義動畫的額外選項。
可能的值有：
speed：設置動畫的速度。
easing：定義要使用的easing函數。
callback:定義動畫完成后要執行的函數。
step：定義動畫的每一步完成后要執行的函數。
queue：布爾值，指示是否在效果隊列中放置動畫。如果為false，則動畫將立即開始。
specialEasing：定義styles參數的一個或多個 CSS 屬性的映射，以及他們對應的 easing 函數。
其他幾個與上面的用法類似，主要來看看 step 和 queue 。
默認地，jQuery 提供針對動畫的隊列功能。這意味着如果編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定義動畫animate()</title> 6 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 7 </head> 8 <style type="text/css"> 9 div { 10 background-color: #bca; 11 width: 200px; 12 height: 1.1em; 13 text-align: center; 14 border: 2px solid green; 15 margin: 3px; 16 font-size: 14px; 17 } 18 </style> 19 <script type="text/javascript"> 20 $(document).ready(function(){ 21 $('#first').click(function(){ 22 // 默認地，動畫會依次執行 23 $('#div1').animate({height:"200px"}) 24 .animate({width:"+=100px"},"slow") 25 .animate({fontSize:"50px"},"slow"); 26 }); 27 $('#second').click(function(){ 28 // 第一個動畫不在隊列中，則前兩個一起執行 29 $('#div2').animate({height:"200px"},{queue:false}) 30 .animate({width:"+=100px"},"slow") 31 .animate({fontSize:"50px"},"slow"); 32 }); 33 }); 34 </script> 35 36 37 <body> 38 <button id="first">div1</button> 39 <button id="second">div2</button> 40 <div id="div1">div1</div> 41 <div id="div2">div2</div> 42 </body> 43 </html>
未完待續。。。