Metode animate di jQuery

Semua metode yang kita pelajari dalam pelajaran sebelumnya agak terbatas - mereka melakukan persis apa yang mereka dirancang untuk dilakukan. Jika Anda membutuhkan lebih banyak kontrol atas animasi - gunakan metode universal animate.

Parameter pertama metode ini menerima objek, di mana Anda harus menetapkan nilai baru dari properti CSS yang ingin Anda animasikan. Dan parameter kedua - durasi eksekusi animasi.

Mari kita terapkan metode ini pada kode HTML berikut:

<button id="button">click me</button>
<div id="elem">text...</div>

Biarkan CSS terlihat seperti ini:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Mari kita buat agar saat tombol ditekan elemen menyusut ke ukuran berikut: tinggi - 50px, lebar - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Jika nilai ditentukan dalam format seperti ini height: '+=50', maka animasi akan bekerja seperti ini: ke nilai tinggi saat ini akan ditambahkan 50px (dalam kasus kami) dan elemen akan teranimasi secara mulus ke nilai baru. Mari kita lihat pada contoh:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Untuk lebih detail tentang metode animate, lihat referensi jQuery.

animate

Ada markup seperti ini:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Buat agar saat div dengan #block ditekan, lebarnya bertambah menjadi 200px dalam 1100ms.

Gunakan markup dari tugas pertama. Buat agar setiap kali ditekan pada div dengan #block, lebarnya bertambah 200px dan setiap penambahan seperti itu terjadi dalam 900px.

Gunakan markup dari tugas pertama. Buat agar setiap kali ditekan pada div dengan #block, lebar dan tingginya bertambah 100px dan setiap penambahan seperti itu terjadi dalam 950px.

Gunakan markup dari tugas pertama. Buat agar setiap kali ditekan pada div dengan #block, ia bergerak ke kanan sejauh 100px dan setiap pergerakan seperti itu terjadi dalam 700px.