# jQuery 效果 - animate() 方法
## 实例
改变 "div" 元素的高度：
```
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
```
## 定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。
### 语法 1
```
$(_selector_).animate(_styles_,_speed_,_easing_,_callback_)
```
| 参数 | 描述 |
| --- | --- |
| styles | 必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）： [`backgroundPosition`](/tiy/t.asp?f=jquery_eff_ani_backgroundposition) [`borderWidth`](/tiy/t.asp?f=jquery_eff_ani_borderwidth) [`borderBottomWidth`](/tiy/t.asp?f=jquery_eff_ani_borderbottomwidth) [`borderLeftWidth`](/tiy/t.asp?f=jquery_eff_ani_borderleftwidth) [`borderRightWidth`](/tiy/t.asp?f=jquery_eff_ani_borderrightwidth) [`borderTopWidth`](/tiy/t.asp?f=jquery_eff_ani_bordertopwidth) [`borderSpacing`](/tiy/t.asp?f=jquery_eff_ani_borderspacing) [`margin`](/tiy/t.asp?f=jquery_eff_ani_margin) [`marginBottom`](/tiy/t.asp?f=jquery_eff_ani_marginbottom) [`marginLeft`](/tiy/t.asp?f=jquery_eff_ani_marginleft) [`marginRight`](/tiy/t.asp?f=jquery_eff_ani_marginright) [`marginTop`](/tiy/t.asp?f=jquery_eff_ani_margintop) [`outlineWidth`](/tiy/t.asp?f=jquery_eff_ani_outlinewidth) [`padding`](/tiy/t.asp?f=jquery_eff_ani_padding) [`paddingBottom`](/tiy/t.asp?f=jquery_eff_ani_paddingbottom) [`paddingLeft`](/tiy/t.asp?f=jquery_eff_ani_paddingleft) [`paddingRight`](/tiy/t.asp?f=jquery_eff_ani_paddingright) [`paddingTop`](/tiy/t.asp?f=jquery_eff_ani_paddingtop) [`height`](/tiy/t.asp?f=jquery_eff_ani_height) [`width`](/tiy/t.asp?f=jquery_eff_ani_width) [`maxHeight`](/tiy/t.asp?f=jquery_eff_ani_maxheight) [`maxWidth`](/tiy/t.asp?f=jquery_eff_ani_maxwidth) [`minHeight`](/tiy/t.asp?f=jquery_eff_ani_minheight) [`minWidth`](/tiy/t.asp?f=jquery_eff_ani_minwidth) [`font`](/tiy/t.asp?f=jquery_eff_ani_font) [`fontSize`](/tiy/t.asp?f=jquery_eff_ani_fontsize) [`bottom`](/tiy/t.asp?f=jquery_eff_ani_bottom) [`left`](/tiy/t.asp?f=jquery_eff_ani_left) [`right`](/tiy/t.asp?f=jquery_eff_ani_right) [`top`](/tiy/t.asp?f=jquery_eff_ani_top) [`letterSpacing`](/tiy/t.asp?f=jquery_eff_ani_letterspacing) [`wordSpacing`](/tiy/t.asp?f=jquery_eff_ani_wordspacing) [`lineHeight`](/tiy/t.asp?f=jquery_eff_ani_lineheight) [`textIndent`](/tiy/t.asp?f=jquery_eff_ani_textindent) 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。 |
| speed | 可选。规定动画的速度。默认是 "normal"。可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" |
| easing |可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数： `swing` `linear` 扩展插件中提供更多 easing 函数。 |
| callback |可选。animate 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 [jQuery Callback](/jquery/jquery_callback.asp "jQuery Callback 函数") 这一章。 |
### 语法 2
```
$(_selector_).animate(_styles_,_options_)
```
| 参数 | 描述 |
| --- | --- |
| _styles_ | 必需。规定产生动画效果的 CSS 样式和值（同上）。 |
| _options_ | 可选。规定动画的额外选项。可能的值： `speed` - 设置动画的速度 `easing` - 规定要使用的 easing 函数 `callback` - 规定动画完成之后要执行的函数 `step` - 规定动画的每一步完成之后要执行的函数 `queue` - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 `specialEasing` - 来自 _styles_ 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数 |
- jQuery 参考手册 - 选择器
- jQuery 参考手册 - 事件
- jQuery 事件 - bind() 方法
- jQuery 事件 - blur() 方法
- jQuery 事件 - change() 方法
- jQuery 事件 - click() 方法
- jQuery 事件 - dblclick() 方法
- jQuery 事件 - delegate() 方法
- jQuery 事件 - die() 方法
- jQuery 事件 - error() 方法
- jQuery 事件 - isDefaultPrevented() 方法
- jQuery 事件 - pageX 属性
- jQuery 事件 - pageY 属性
- jQuery 事件 - preventDefault() 方法
- jQuery 事件 - result 属性
- jQuery 事件 - target 属性
- jQuery 事件 - timeStamp 属性
- jQuery 事件 - type 属性
- jQuery 事件 - which 属性
- jQuery 事件 - focus() 方法
- jQuery 事件 - keydown() 方法
- jQuery 事件 - keypress() 方法
- jQuery 事件 - keyup() 方法
- jQuery 事件 - live() 方法
- jQuery 事件 - load() 方法
- jQuery 事件 - mousedown() 方法
- jQuery 事件 - mouseenter() 方法
- jQuery 事件 - mouseleave() 方法
- jQuery 事件 - mousemove() 方法
- jQuery 事件 - mouseout() 方法
- jQuery 事件 - mouseover() 方法
- jQuery 事件 - mouseup() 方法
- jQuery 事件 - one() 方法
- jQuery 事件 - ready() 方法
- jQuery 事件 - resize() 方法
- jQuery 事件 - scroll() 方法
- jQuery 事件 - select() 方法
- jQuery 事件 - submit() 方法
- jQuery 事件 - toggle() 方法
- jQuery 事件 - trigger() 方法
- jQuery 事件 - triggerHandler() 方法
- jQuery 事件 - unbind() 方法
- jQuery 事件 - undelegate() 方法
- jQuery 事件 - unload 属性
- jQuery 参考手册 - 效果
- jQuery 效果 - animate() 方法
- jQuery 效果 - clearQueue() 方法
- jQuery 效果 - fadeIn() 方法
- jQuery 效果 - fadeOut() 方法
- jQuery 效果 - fadeTo() 方法
- jQuery 效果 - hide() 方法
- jQuery 效果 - show() 方法
- jQuery 效果 - slideDown() 方法
- jQuery 效果 - slideToggle() 方法
- jQuery 效果 - slideUp() 方法
- jQuery 效果 - stop() 方法
- jQuery 效果 - toggle() 方法
- jQuery 参考手册 - 文档操作
- jQuery 属性操作 - addClass() 方法
- jQuery 文档操作 - after() 方法
- jQuery 文档操作 - append() 方法
- jQuery 文档操作 - appendTo() 方法
- jQuery 属性操作 - attr() 方法
- jQuery 文档操作 - before() 方法
- jQuery 文档操作 - clone() 方法
- jQuery 文档操作 - detach() 方法
- jQuery 文档操作 - empty() 方法
- jQuery 属性操作 - hasClass() 方法
- jQuery 文档操作 - html() 方法
- jQuery 文档操作 - insertAfter() 方法
- jQuery 文档操作 - insertBefore() 方法
- jQuery 文档操作 - prepend() 方法
- jQuery 文档操作 - prependTo() 方法
- jQuery 文档操作 - remove() 方法
- jQuery 属性操作 - removeAttr() 方法
- jQuery 属性操作 - removeClass() 方法
- jQuery 文档操作 - replaceAll() 方法
- jQuery 文档操作 - replaceWith() 方法
- jQuery 文档操作 - text() 方法
- jQuery 属性操作 - toggleClass() 方法
- jQuery 文档操作 - unwrap() 方法
- jQuery 属性操作 - val() 方法
- jQuery 文档操作 - wrap() 方法
- jQuery 文档操作 - wrapAll() 方法
- jQuery 文档操作 - wrapInner() 方法
- jQuery 参考手册 - 属性操作
- jQuery 参考手册 - CSS 操作
- jQuery CSS 操作 - css() 方法
- jQuery CSS 操作 - height() 方法
- jQuery CSS 操作 - offset() 方法
- jQuery CSS 操作 - offsetParent() 方法
- jQuery CSS 操作 - position() 方法
- jQuery CSS 操作 - scrollLeft() 方法
- jQuery CSS 操作 - scrollTop() 方法
- jQuery CSS 操作 - width() 方法
- jQuery 参考手册 - Ajax
- jQuery ajax - ajax() 方法
- jQuery ajax - ajaxComplete() 方法
- jQuery ajax - ajaxError() 方法
- jQuery ajax - ajaxSend() 方法
- jQuery ajax - ajaxSetup() 方法
- jQuery ajax - ajaxStart() 方法
- jQuery ajax - ajaxStop() 方法
- jQuery ajax - ajaxSuccess() 方法
- jQuery ajax - get() 方法
- jQuery ajax - getJSON() 方法
- jQuery ajax - getScript() 方法
- jQuery ajax - load() 方法
- jQuery ajax - param() 方法
- jQuery ajax - post() 方法
- jQuery ajax - serialize() 方法
- jQuery ajax - serializeArray() 方法
- jQuery 参考手册 - 遍历
- jQuery 遍历 - add() 方法
- jQuery 遍历 - andSelf() 方法
- jQuery 遍历 - children() 方法
- jQuery 遍历 - closest() 方法
- jQuery 遍历 - contents() 方法
- jQuery 遍历 - each() 方法
- jQuery 遍历 - end() 方法
- jQuery 遍历 - eq() 方法
- jQuery 遍历 - filter() 方法
- jQuery 遍历 - find() 方法
- jQuery 遍历 - first() 方法
- jQuery 遍历 - has() 方法
- jQuery 遍历 - is() 方法
- jQuery 遍历 - last() 方法
- jQuery 遍历 - map() 方法
- jQuery 遍历 - next() 方法
- jQuery 遍历 - nextAll() 方法
- jQuery 遍历 - nextUntil() 方法
- jQuery 遍历 - not() 方法
- jQuery 遍历 - offsetParent() 方法
- jQuery 遍历 - parent() 方法
- jQuery 遍历 - parents() 方法
- jQuery 遍历 - parentsUntil() 方法
- jQuery 遍历 - prev() 方法
- jQuery 遍历 - prevAll() 方法
- jQuery 遍历 - prevUntil() 方法
- jQuery 遍历 - siblings() 方法
- jQuery 遍历 - slice() 方法
- jQuery 参考手册 - 数据
- jQuery 遍历 - clearQueue() 方法
- jQuery 数据 - data() 方法
- jQuery 数据 - jQuery.data() 方法
- jQuery 遍历 - dequeue() 方法
- jQuery 遍历 - jQuery.dequeue() 方法
- jQuery 遍历 - hasData() 方法
- jQuery 遍历 - queue() 方法
- jQuery 遍历 - jQuery.queue() 方法
- jQuery 数据 - removeData() 方法
- jQuery 数据 - jQuery.removeData() 方法
- jQuery 参考手册 - DOM 元素方法
- jQuery DOM 元素方法 - get() 方法
- jQuery DOM 元素方法 - index() 方法
- jQuery DOM 元素方法 - size() 方法
- jQuery DOM 元素方法 - toArray() 方法
- jQuery 参考手册 - 核心
- jQuery 核心 - jQuery() 方法
- jQuery 核心 - noConflict() 方法
- jQuery 参考手册 - 属性
- jQuery context 属性
- jQuery jquery 属性
- jQuery jQuery.fx.interval 属性
- jQuery jQuery.fx.off 属性
- jQuery jQuery.support 属性
- jQuery length 属性
- 免责声明