jQuery animate() Metode
Contoh
"Hidupkan" sebuah elemen, dengan mengubah ketinggiannya:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definisi dan Penggunaan
Metode animate() melakukan animasi kustom dari sekumpulan properti CSS.
Metode ini mengubah elemen dari satu status ke status lainnya dengan gaya CSS. Nilai properti CSS diubah secara bertahap, untuk membuat efek animasi.
Hanya nilai numerik yang dapat dianimasikan (seperti "margin:30px"). Nilai string tidak dapat dianimasikan (seperti "warna latar:merah"), kecuali untuk string "tampilkan", "sembunyikan" dan "beralih". Nilai-nilai ini memungkinkan menyembunyikan dan menampilkan elemen animasi.
Tip: Gunakan "+=" atau "-=" untuk animasi relatif.
Sintaksis
(selector).animate({styles},speed,easing,callback)
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Sintaks Alternatif
(selector).animate({styles},{options})
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|
Cobalah Sendiri - Contoh
Cara menggunakan animate() dengan fungsi callback yang mengulang animasi.
Menggunakan sintaks alternatif untuk menentukan beberapa gaya dan opsi animasi.
Cara menggunakan metode animate() untuk membuat bilah kemajuan.
Cara menggunakan animate() untuk menambahkan pengguliran halus ke tautan.