jQuery animate() 方法
示例
"Animate" an element, by changing its height
$("button").click(function(){
$("#box").animate({height: "300px"});
});
自己动手试一试 »
定义和用法
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 而不是 margin-right，等等。 可动画化的属性
只有数值可以被动画化（例如“margin:30px”）。字符串值（例如“background-color:red”）不能被动画化，但字符串“show”、“hide”和“toggle”除外。这些值允许隐藏和显示被动画化的元素。 |
| speed | 可选。指定动画的速度。默认值为 400 毫秒。 可能的值
|
| easing | 可选。指定元素在动画不同点时的速度。默认值为“swing”。可能的值
|
| callback | 可选。在动画完成后执行的函数。要了解更多关于回调函数的信息，请阅读我们的 jQuery 回调函数章节。 |
替代语法
(selector).animate({styles},{options})
| 参数 | 描述 |
|---|---|
| styles | 必需。指定一个或多个要动画化的 CSS 属性/值（请参阅上面的可能值）。 |
| 选项 | 可选。指定动画的附加选项。可能的值
|
自行尝试 - 示例
使用 animate() 和回调函数
如何使用 animate() 和一个重复动画的回调函数。
替代语法示例
使用替代语法指定多个动画样式和选项。
使用 animate() 创建进度条
如何使用 animate() 方法创建进度条。
为页面锚点添加平滑滚动
如何使用 animate() 为链接添加平滑滚动。
