[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> ~~~