jQuery animate() 方法
实例
通过改变元素的高度，来让元素具有 "动画" 效果:
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("#box").animate({height: "300px"});});$("#btn2").click(function(){$("#box").animate({height: "100px"});});});</script></head><body><button id="btn1">动画高度</button><button id="btn2">重置高度</button><div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div></body></html>
定义与用法
animate() 方法执行一组 CSS 属性的自定义动画。
此方法使用 CSS 样式将元素从一种状态更改为另一种状态。CSS 属性值会逐渐更改，以创建动画效果。
只能为数值设置动画 (比如 "margin:30px")。字符串值不能设置动画 (比如 "background-color:red")。不过 "show", "hide" 和 "toggle" 这些例外，它们可以隐藏和显示动画元素。
提示: 对于相对动画效果可以使用 "+=" 或者 "-=" 。
语法
(selector).animate({styles},speed,easing,callback)
| 参数 | 描述 |
|---|---|
| styles | 必填.指定一个或多个要设置动画的 CSS 属性/值 注意: 当与 animate() 方法一起使用时，属性名必须以驼峰大小写：您需要编写 paddingLeft 而不是 padding-left，marginRight 而不是 padding-right，等等 可以设置动画的属性:
只能为数值设置动画 (比如 "margin:30px")。字符串值不能设置动画 (比如 "background-color:red")。不过 "show", "hide" 和 "toggle" 这些例外，它们可以隐藏和显示动画元素。 |
| speed | 可选。指定动画的速度。默认值为 400 毫秒 值可以为:
|
| easing | 可选。 指定元素在动画不同点的速度。默认值是 "swing"。值可以为:
|
| callback | 可选. 动画完成后要执行的函数。要了解有关回调的更多信息，请阅读本站的 jQuery 回调函数 章节 |
备用语法
(selector).animate({styles},{options})
| 参数 | 描述 |
|---|---|
| styles | 必填。指定一个或多个要设置动画的 CSS 属性/值（请参见上面的可能值） |
| options | 可选。指定动画的其他选项。可能的值:
|