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>
效果图: