Metode animate

Metode animate memungkinkan pembuatan efek animasi untuk berbagai properti CSS. Satu-satunya parameter wajib - objek dengan properti CSS, mirip dengan yang kita berikan ke metode css. Banyak properti yang memiliki nilai non-numerik atau beberapa nilai tidak dapat dianimasikan oleh fungsionalitas dasar jQuery (misalnya background-color). Juga tidak selalu nama singkat properti CSS didukung, misalnya font - sebagai gantinya perlu menggunakan fontSize atau font-size. Sebelum nilai dapat ditempatkan '+=' atau '-=', dalam hal ini nilai yang ditentukan selanjutnya akan ditambahkan atau dikurangkan dari nilai properti saat ini. Juga sebagai pengganti nilai numerik dapat ditempatkan show, hide atau toggle. Semua efek jQuery, termasuk animate, dapat dinonaktifkan secara global, menggunakan pengaturan jQuery.fx.off = true, yang menetapkan nilai durasi menjadi 0.

Sintaks

Parameter pertama animasi adalah objek dengan properti CSS dan nilainya dalam format kunci: nilai, yang akan kita animasikan. Parameter lainnya dianggap opsional. Parameter kedua - menentukan durasi animasi dalam milidetik, 400ms secara default. Parameter ketiga fungsi easing untuk transisi (secara default adalah swing), serta keempat - fungsi callback, yang akan dijalankan setelah animasi selesai:

.animate(properti, [durasi ], [fungsi easing ], [fungsi callback ]);

Waktu dapat ditetapkan tidak hanya dalam milidetik, tetapi juga dengan kata kunci slow (600ms) dan fast (200ms), semakin besar nilainya, semakin lambat animasinya. Anda dapat memberikan berbagai opsi ke metode sebagai parameter kedua, dalam bentuk objek JavaScript, yang berisi pasangan kunci: nilai:

.animate(properti, opsi);

Misalnya, mari kita tetapkan untuk properti CSS width dan height nilai toggle. Durasi 5000ms, fungsi easing kita berikan dalam bentuk objek, untuk lebar akan berupa fungsi linear, dan untuk tinggi - easeOutBounce, juga setelah animasi selesai fungsi akan dijalankan sekali (lihat kunci complete), yang setelah elemen dengan #test akan menempatkan div dengan tulisan 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Di bawah ini dalam tabel diberikan properti dan metode objek options dan deskripsinya:

Nama	Deskripsi
`duration`	Durasi animasi dalam milidetik - string atau angka. `400ms` secara default.
`easing`	Menentukan fungsi easing mana yang digunakan. `swing` secara default.
`queue`	Nilai boolean atau string. `true` secara default. Menunjukkan - apakah akan menempatkan animasi dalam antrian. Dengan nilai `false` animasi akan segera dimulai. Jika parameter diberikan sebagai string, maka animasi akan ditempatkan dalam antrian, yang diwakili oleh parameter ini. Saat menggunakan antrian dengan nama kustom, animasi tidak akan mulai secara otomatis, untuk menjalankannya - gunakan `dequeue('queuename')`.
`specialEasing`	Di sini Anda dapat memberikan objek, di mana kuncinya adalah properti CSS, dan nilainya - fungsi easing yang sesuai.
`step`	Fungsi, yang dipanggil untuk setiap properti yang dianimasikan dari setiap elemen yang dianimasikan. Ini memungkinkan modifikasi objek `Tween`, untuk mengubah nilai properti sebelum ditetapkan. Sebagai parameter menerima nilai `tween` saat ini dan objek `Tween`.
`progress`	Fungsi, yang dipanggil setelah setiap langkah animasi, hanya satu kali per elemen terlepas dari jumlah properti yang dianimasikan. Fungsi menerima tiga parameter `animation` (dalam bentuk promise), `progress` (angka dari `0` hingga `1`) dan `remainingMs` (jumlah milidetik yang tersisa).
`complete`	Fungsi, yang dipanggil sekali setelah animasi elemen selesai. Fungsi menerima `animation` (dalam bentuk promise).
`start`	Fungsi, yang dipanggil ketika animasi elemen dimulai. Fungsi menerima `animation` (dalam bentuk promise) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara otomatis diselesaikan).
`done`	Fungsi, yang dipanggil ketika animasi elemen berakhir (promisenya terpenuhi berhasil). Fungsi menerima `animation` (dalam bentuk promise) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara otomatis diselesaikan).
`fail`	Fungsi, yang dipanggil ketika animasi elemen berakhir dengan kesalahan (promisenya terpenuhi dengan kesalahan). Fungsi menerima `animation` (dalam bentuk promise) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara otomatis diselesaikan).
`always`	Fungsi, yang dipanggil ketika animasi elemen selesai atau dihentikan tanpa penyelesaian (promisenya terpenuhi berhasil atau dengan kesalahan). Fungsi menerima `animation` (dalam bentuk promise) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara otomatis diselesaikan).

Contoh

Mari saat tombol #left ditekan, kita geser kotak hijau ke kiri, dan tombol #right ke kanan sebesar 50px, juga atur durasi menjadi 600ms - dengan perintah slow:

<button id="left">kiri</button>
<button id="right">kanan</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Lihat juga

metode show,
yang secara halus menampilkan elemen
metode stop,
yang memungkinkan menghentikan animasi yang sedang berjalan
metode delay,
yang menetapkan penundaan eksekusi peristiwa
properti jQuery.fx.off,
yang memungkinkan menonaktifkan animasi secara global
selektor animated,
yang memilih elemen, yang saat ini terlibat dalam animasi