tutorial pengembangan web terbaru
 

jQuery animate() Method

<Metode jQuery Efek

Contoh

"Animate" elemen, dengan mengubah tingginya:

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

Definisi dan Penggunaan

The animate() metode melakukan animasi kustom dari satu set properti CSS.

Metode ini mengubah elemen dari satu negara ke yang lain dengan gaya CSS. Nilai properti CSS berubah secara bertahap, untuk membuat efek animasi.

Hanya nilai numerik dapat animasi (seperti "margin:30px" ). Nilai-nilai string tidak dapat animasi (seperti "background-color:red" ), kecuali untuk string "show", "hide" dan "toggle" . Nilai-nilai ini memungkinkan bersembunyi dan menunjukkan animasi elemen.

Tip: Gunakan "+=" "-=" "+=" "-=" Untuk animasi relatif.

Sintaksis

(selector).animate({styles},speed,easing,callback)

Parameter Deskripsi
styles Wajib. Menentukan satu atau lebih CSS properti / nilai untuk menghidupkan.

Catatan: Nama-nama properti harus unta-cased bila digunakan dengan animate() metode: Anda akan perlu menulis paddingLeft bukannya padding-left, marginRight bukan margin-right, dan sebagainya.

Sifat yang dapat animasi:


Hanya nilai numerik dapat animasi (seperti "margin:30px" ). Nilai-nilai string tidak dapat animasi (seperti "background-color:red" ), kecuali untuk string "show", "hide" dan "toggle" . Nilai-nilai ini memungkinkan bersembunyi dan menunjukkan animasi elemen.

Tip: animasi Warna tidak termasuk dalam inti jQuery perpustakaan.Jika Anda ingin menghidupkan warna, Anda perlu men-download plugin yang Color Animasi dari jQuery.com
speed Pilihan. Menentukan kecepatan animasi. Nilai default adalah 400 milidetik

Kemungkinan nilai:

  • milidetik (seperti 100, 1000, 5000, dll)
  • "slow"
  • "fast"
easing Pilihan. Menentukan kecepatan elemen di titik yang berbeda dari animasi. Nilai default adalah "swing" . Kemungkinan nilai:
  • "swing" - bergerak lebih lambat di awal / akhir, tapi lebih cepat di tengah
  • "linear" - bergerak dalam kecepatan konstan
Tip: Fungsi lainnya pelonggaran tersedia dalam plugin eksternal.
callback Pilihan. Sebuah fungsi yang akan dieksekusi setelah animasi selesai. Untuk mempelajari lebih lanjut tentang callback, baca jQuery Callback bab

alternatif Sintaks

(selector).animate({styles},{options})

Parameter Deskripsi
styles Wajib. Menentukan satu atau properti CSS lebih / nilai untuk menghidupkan (Lihat nilai yang mungkin di atas)
options Pilihan. Menentukan opsi tambahan untuk animasi. Kemungkinan nilai:
  • duration - menetapkan kecepatan animasi
  • easing - menetapkan fungsi pelonggaran menggunakan
  • complete - menentukan fungsi yang akan dieksekusi setelah animasi selesai
  • step - menentukan fungsi yang akan dieksekusi untuk setiap langkah dalam animasi
  • progress - menentukan fungsi yang akan dieksekusi setelah setiap langkah dalam animasi
  • queue - nilai Boolean yang menentukan apakah atau tidak untuk menempatkan animasi di antrian efek
  • specialEasing - peta satu atau lebih properti CSS dari > gaya parameter, dan fungsi mereka mengurangi sesuai
  • start - menetapkan fungsi yang akan dijalankan ketika animasi dimulai
  • done - menetapkan fungsi yang akan dijalankan ketika ujung animasi
  • fail - menentukan fungsi yang dijalankan jika animasi gagal untuk menyelesaikan
  • always - menentukan fungsi yang dijalankan jika animasi berhenti tanpa menyelesaikan

Coba Sendiri - Contoh

Menggunakan animate() dengan fungsi callback
Cara menggunakan animate() dengan fungsi callback yang berulang animasi.

Alternatif Sintaks Contoh
Menggunakan sintaks alternatif untuk menentukan beberapa gaya animasi dan pilihan.

Menggunakan animate() untuk membuat progress bar
Cara menggunakan animate() metode untuk membuat progress bar.

Tambahkan bergulir mulus ke halaman jangkar
Cara menggunakan animate() untuk menambahkan bergulir mulus ke link.

<Metode jQuery Efek