[TOC] ### 通過改變元素的高度，對元素應用動畫： ~~~ $("button").click(function(){ $("#box").animate({height:"300px"}); }); ~~~ ### 定義和用法 ~~~ animate() 方法執行 CSS 屬性集的自定義動畫。 該方法通過 CSS 樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。 只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。 提示：請使用 "+=" 或 "-=" 來創建相對動畫。 ~~~ ### 語法： ~~~ (selector).animate({styles},speed,easing,callback) ~~~ 事例： ~~~ 使用 jquery 時要引入cdn <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"> </script> <input type="text" id="text"> <script> $("#text").focus(function(){ $(this).animate({width:"300px"},1000) }) $("#text").blur(function(){ $(this).animate({width:"200px"},1000) }) </script> ~~~