jQuery 效果 - animate() 方法

太过爱你忘了你带给我的痛 2022-06-01 02:10 274阅读 0赞

# jQuery 效果 - animate() 方法 #

[jQuery 效果参考手册][jQuery]

## 实例 ##

改变 "div" 元素的高度：

$(".btn1").click(function(){
      $("#box").animate({height:"300px"});
    });

[亲自试一试][Link 1]

## 定义和用法 ##

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

**注释：**使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

### 语法 1 ###

$(selector).animate(styles,speed,easing,callback)

<table style="margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:139px"> 参数</th> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> styles</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值（提供实例）： 
 <ul style="margin:20px; padding:0px; border:0px; list-style-type:none"> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_backgroundposition" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">backgroundPosition</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_borderwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">borderWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_borderbottomwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">borderBottomWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_borderleftwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">borderLeftWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_borderrightwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">borderRightWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_bordertopwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">borderTopWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_borderspacing" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">borderSpacing</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_margin" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">margin</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_marginbottom" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">marginBottom</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_marginleft" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">marginLeft</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_marginright" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">marginRight</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_margintop" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">marginTop</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_outlinewidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">outlineWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_padding" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">padding</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_paddingbottom" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">paddingBottom</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_paddingleft" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">paddingLeft</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_paddingright" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">paddingRight</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_paddingtop" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">paddingTop</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_height" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">height</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_width" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">width</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_maxheight" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">maxHeight</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_maxwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">maxWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_minheight" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">minHeight</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_minwidth" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">minWidth</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_font" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">font</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_fontsize" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">fontSize</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_bottom" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">bottom</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_left" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">left</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_right" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">right</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_top" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">top</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_letterspacing" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">letterSpacing</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_wordspacing" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">wordSpacing</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_lineheight" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">lineHeight</a></li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><a href="http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_textindent" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">textIndent</a></li> 
 </ul> 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> speed</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 可选。规定动画的速度。默认是 "normal"。 可能的值： 
 <ul style="margin:20px; padding:0px; border:0px; list-style-type:none"> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc">毫秒 （比如 1500）</li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc">"slow"</li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc">"normal"</li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc">"fast"</li> 
 </ul> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> easing</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数： 
 <ul style="margin:20px; padding:0px; border:0px; list-style-type:none"> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc">swing</li> 
 <li style="margin:0px; padding:0px; border:0px; list-style-type:disc">linear</li> 
 </ul> 扩展插件中提供更多 easing 函数。 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> callback</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 可选。animate 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的&nbsp;<a href="http://www.w3school.com.cn/jquery/jquery_callback.asp" title="jQuery Callback 函数" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; border-top-color:initial; border-right-color:initial; border-bottom-color:rgb(144,11,9); border-left-color:initial; color:rgb(144,11,9); background:transparent" rel="nofollow">jQuery Callback</a>&nbsp;这一章。 </td> 
 </tr> 
 </tbody> 
</table>

### 语法 2 ###

$(selector).animate(styles,options)

[jQuery 效果参考手册][jQuery]

[jQuery]: http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=jquery_effect_animate