jQuery 效果 - animate() 方法

jQuery Etki Referans Kılavuzu

实例

改变 "div" 元素的高度：

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

亲自试一试

定义和用法

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

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

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

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

语法 1

$(selector).animate(styles,speed,easing,callback)
Parametreler Açıklama
styles

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

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

Açıklama:CSS stilleri DOM adı (örneğin "fontSize") ile ayarlanır, CSS adı (örneğin "font-size") ile değil.
speed

Opsiyonel. Animasyon hızını belirtir. Varsayılan "normal".

Mümkün olan değerler:

  • milisaniye (örneğin 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Opsiyonel. Farklı animasyon noktalarında animasyon hızını belirleyen easing fonksiyonu.

Dahili easing fonksiyonları:

  • swing
  • linear

Genişletilmiş eklenti插件 sağlar daha fazla easing fonksiyonu.
callback

Opsiyonel. animate fonksiyonu çalıştıktan sonra çalıştırılacak fonksiyon.

Geri bildirim hakkında daha fazla bilgi edinmek için, sitemizi ziyaret edin jQuery Geri Bildirim Bu bölüm.

Gramer 2

$(selector).animate(styles,options)
Parametreler Açıklama
styles Gerekli. Animasyon etkisini oluşturan CSS stilleri ve değerleri (yukarıda belirtilen gibi)
options

Opsiyonel. Animasyonun ek seçeneklerini belirtir.

Mümkün olan değerler:

  • speed - Animasyon hızını ayarlar
  • easing - Kullanılacak easing fonksiyonu
  • callback - Animasyonun ardından çalıştırılacak fonksiyon
  • step - Animasyonun her adımının ardından çalıştırılacak fonksiyon
  • queue - Booleen değer. Etki sırasındaki animasyonun eklip edilip edilmeyeceğini belirtir. False ise, animasyon hemen başlar
  • specialEasing - styles Bir veya daha fazla CSS özelliğinin haritalaması ve bunların karşılaştırma fonksiyonları

jQuery Etki Referans Kılavuzu