jQuery 效果 - animate() 方法

Panduan Referensi Efek jQuery

实例

改变 "div" 元素的高度：

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

亲自试一试

定义和用法

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

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

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

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

语法 1

$().animate(styles,speed,easing,callback)
Parameter Deskripsi
styles

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

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

Keterangan:Gaya CSS digunakan dengan nama DOM (seperti "fontSize") untuk disetel, bukan nama gaya CSS (seperti "font-size").
speed

Pilihan. Tentukan kecepatan animasi. Default adalah "normal".

Nilai yang mungkin:

  • milidetik (seperti 1500)
  • "lambat"
  • "normal"
  • "cepat"
easing

Pilihan. Tentukan fungsi penyelesaian untuk menata kecepatan animasi di titik animasi yang berbeda.

Fungsi penyelesaian bawaan:

  • swing
  • linear

Tambahan fungsi penyelesaian yang disediakan dalam ekstensi plugin.
callback

Pilihan. Fungsi yang akan dieksekusi setelah fungsi animate selesai dijalankan.

Untuk mengenal lebih banyak tentang callback, kunjungi jQuery Callback Di bab ini.

Grammar 2

$().animate(styles,options)
Parameter Deskripsi
styles Wajib. Tentukan gaya CSS dan nilai yang memicu efek animasi (seperti di atas).
options

Pilihan. Tentukan opsi ekstra animasi.

Nilai yang mungkin:

  • speed - atur kecepatan animasi
  • easing - tentukan fungsi penyelesaian yang akan digunakan
  • callback - tentukan fungsi yang akan dieksekusi setelah animasi selesai
  • step - tentukan fungsi yang akan dieksekusi setelah setiap langkah animasi selesai
  • queue - nilai boolean. Menunjukkan apakah animasi harus ditempatkan di antrian efek. Jika false, animasi akan dimulai segera
  • specialEasing - datang dari styles Pemetaan satu atau beberapa properti CSS dan fungsi penyelesaian yang coraknya

Panduan Referensi Efek jQuery