jQuery 效果 - animate() 方法

Manwal ng Epekto ng jQuery

实例

改变 "div" 元素的高度：

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

亲自试一试

定义和用法

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

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

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

Komentaryo:使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$(selectorstyles,speed,easing,callback)
Mga parameter Paglalarawan
styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值（提供实例）：

Komentaryo:Ang CSS style ay ginagamit ang pangalan ng DOM (halimbawa "fontSize") upang itakda, hindi ang pangalan ng CSS (halimbawa "font-size").
speed

Optional. Tumutukoy sa bilis ng animation. Ang default ay "normal".

Mga posibleng halaga:

  • milisegundo (halimbawa 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Optional. Tumutukoy sa easing function na dapat gamitin sa iba't ibang puntos ng animation.

Mga nakalipas na easing function:

  • swing
  • linear

Ang mga extension plugin ay nagbibigay ng higit pang easing function.
callback

Optional. Ang function na dapat isagawa pagkatapos ng paglilitis ng animate function.

Kung gusto mong matuto ng higit pa tungkol sa callback, bisitahin mo ang aming jQuery Callback Ang kabanata na ito.

Grammar 2

$(selectorstyles,options)
Mga parameter Paglalarawan
styles Mga kinakailangan. Tumutukoy sa CSS style at halaga na gagamitin upang bumuo ng epekto ng animation (katulad nito).
options

Optional. Tumutukoy sa mga karagdagang opsyon ng animation.

Mga posibleng halaga:

  • speed - Tumutukoy sa bilis ng animation
  • easing - Tumutukoy sa function na dapat gamitin sa easing
  • callback - Tumutukoy sa function na dapat isagawa pagkatapos ng paglilitis ng animation
  • step - Tumutukoy sa function na dapat isagawa pagkatapos ng bawat hakbang ng animation
  • queue - Boolean value. Nagtutukoy kung ilagay ang animation sa queue ng epekto. Kung may 'false', ang animation ay magsisimula agad
  • specialEasing - mula sa styles Mga mapagkukunan ng isang o ilang CSS attribute, at ang kanilang kasama na easing function

Manwal ng Epekto ng jQuery