animate()方法用于创建自定义动画。
概述 .animate( properties [, duration ] [, easing ] [, complete ] )
- properties
-
类型: PlainObject
一个CSS属性和值的对象,动画将根据这组对象移动。
-
duration (默认:
400)类型: Number or String
一个字符串或者数字决定动画将运行多久。或表示动画时长的毫秒数值(如：1000) ）
-
easing (默认:
swing)类型: String
一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
-
complete
类型: Function()
在动画完成时执行的函数。
-
语法：
$(selector) .animate( {params},speed,callback);
- 必需的params参数定义形成动画的CSS属性。
- 可选的speed参数规定效果的时长。它可以取以下值：“slow”、“fast”或者毫秒。
- 可选的callback参数是动画完成所执行的函数名称。
例子：
<body><input type="button" value="自定义动画" id="btn"><div>利宾一家人</div><script>$(function() {$("#btn").on("click", function() {$("div").animate({"left": "500px","top": "400px"}).animate({"font-size": "30px"})})})</script>
</body>效果图：
![[HTML/CSS]动画效果以及自定义动画效果](https://img-blog.csdnimg.cn/74623d91a64041bcabb11e1ece84fd89.png)
