Kaedah animate dalam jQuery

Semua kaedah yang kita bincangkan dalam pelajaran sebelumnya agak terhad - mereka melakukan tepat apa yang mereka diciptakan untuk. Jika anda memerlukan lebih banyak kawalan ke atas animasi - gunakan kaedah sejagat animate.

Parameter pertama kaedah ini menerima objek, di mana anda harus menetapkan nilai baru untuk sifat-sifat CSS yang ingin anda animasikan. Dan parameter kedua - masa pelaksanaan animasi.

Mari kita laksanakan kaedah ini pada kod HTML berikut:

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

Biarkan CSS kelihatan seperti ini:

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

Mari kita buat agar apabila butang ditekan, elemen mengecil kepada saiz berikut: tinggi - 50px, lebar - 100px:

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

Jika anda menetapkan nilai dalam format seperti ini height: '+=50', maka animasi akan berfungsi seperti ini: kepada nilai ketinggian semasa akan ditambah 50px (dalam kes kami) dan elemen akan dianimasikan secara lancar kepada nilai baru. Mari lihat pada contoh:

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

Untuk maklumat lanjut tentang kaedah animate, lihat dalam rujukan jQuery.

animate

Terdapat 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 apabila div dengan #block ditekan, lebarnya meningkat kepada 200px dalam masa 1100ms.

Gunakan markup dari tugas pertama. Buat agar pada setiap kali tekan pada div dengan #block, lebarnya meningkat sebanyak 200px dan setiap peningkatan sedemikian berlaku dalam masa 900ms.

Gunakan markup dari tugas pertama. Buat agar pada setiap kali tekan pada div dengan #block, lebarnya dan tingginya meningkat sebanyak 100px dan setiap peningkatan sedemikian berlaku dalam masa 950ms.

Gunakan markup dari tugas pertama. Buat agar pada setiap kali tekan pada div dengan #block, ia bergerak ke kanan sebanyak 100px dan setiap pergerakan sedemikian berlaku dalam masa 700ms.