Kaedah animate

Kaedah animate membolehkan penciptaan kesan animasi untuk pelbagai sifat CSS. Satu-satunya parameter wajib - objek dengan sifat CSS, serupa dengan yang kita hantar kepada kaedah css. Banyak sifat yang mempunyai nilai bukan nombor atau beberapa nilai tidak boleh dianimasikan oleh fungsi asas jQuery (contohnya background-color). Juga, tidak selalu nama singkatan sifat CSS disokong, contohnya font - sebaliknya, gunakan fontSize atau font-size. Sebelum nilai, anda boleh meletakkan '+=' atau '-=', dalam kes ini nilai yang dinyatakan seterusnya akan ditambah atau ditolak daripada nilai semasa sifat. Juga, bukannya nilai berangka anda boleh meletakkan show, hide atau toggle. Semua kesan jQuery, termasuk animate, boleh dimatikan secara global, menggunakan tetapan jQuery.fx.off = true, yang menetapkan nilai tempoh kepada 0.

Sintaks

Parameter pertama animasi ialah objek dengan sifat CSS dan nilainya dalam format kunci: nilai, yang ingin kita animasikan. Parameter lain dianggap pilihan. Parameter kedua - menentukan tempoh animasi dalam milisaat, 400ms secara lalai. Parameter ketiga ialah fungsi kelancaran untuk peralihan (secara lalai ialah swing), dan keempat - fungsi panggilan balik, yang akan dilancarkan selepas animasi selesai:

.animate(sifat, [tempoh ], [fungsi kelancaran ], [fungsi panggilan balik ]);

Masa boleh ditetapkan bukan hanya dalam milisaat, tetapi juga dengan kata kunci slow (600ms) dan fast (200ms), semakin besar nilai, semakin perlahan animasi. Anda boleh menghantar pelbagai pilihan kepada kaedah sebagai parameter kedua, dalam bentuk objek JavaScript, yang mengandungi pasangan kunci: nilai:

.animate(sifat, pilihan);

Sebagai contoh, mari kita tetapkan untuk sifat CSS width dan height nilai toggle. Tempoh kepada 5000ms, kita akan hantar fungsi kelancaran dalam bentuk objek, untuk lebar ia akan menjadi fungsi linear, dan untuk tinggi - easeOutBounce, juga selepas animasi selesai, fungsi akan dilaksanakan sekali (lihat kunci complete), yang selepas elemen dengan #test akan meletakkan 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 dalam jadual diberikan sifat dan kaedah objek pilihan dan keterangannya:

Nama	Keterangan
`duration`	Tempoh animasi dalam milisaat - rentetan atau nombor. `400ms` secara lalai.
`easing`	Menentukan fungsi kelancaran mana yang digunakan. `swing` secara lalai.
`queue`	Nilai Boolean atau rentetan. `true` secara lalai. Menunjukkan - sama ada untuk meletakkan animasi dalam barisan. Dengan nilai `false` animasi akan bermula serta-merta. Jika parameter dihantar sebagai rentetan, maka animasi akan diletakkan dalam barisan, yang diwakili oleh parameter ini. Apabila menggunakan barisan dengan nama tersuai, animasi tidak akan bermula secara automatik, untuk melancarkannya - gunakan `dequeue('namabarisan')`.
`specialEasing`	Di sini anda boleh menghantar objek, di mana kuncinya akan menjadi sifat CSS, dan nilainya - fungsi kelancaran yang sepadan.
`step`	Fungsi yang dipanggil untuk setiap sifat teranimasi setiap elemen teranimasi. Ia membenarkan modifikasi objek `Tween`, untuk mengubah nilai sifat sebelum ia ditetapkan. Sebagai parameter, ia menerima nilai semasa `tween` dan objek `Tween`.
`progress`	Fungsi yang dipanggil selepas setiap langkah animasi, hanya sekali untuk setiap elemen tanpa mengira bilangan sifat teranimasi. Fungsi menerima tiga parameter `animation` (dalam bentuk janji), `progress` (nombor dari `0` hingga `1`) dan `remainingMs` (nombor baki milisaat).
`complete`	Fungsi yang dipanggil sekali selepas tamat animasi elemen. Fungsi menerima `animation` (dalam bentuk janji).
`start`	Fungsi yang dipanggil, apabila animasi elemen bermula. Fungsi menerima `animation` (dalam bentuk janji) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara automatik diselesaikan).
`done`	Fungsi yang dipanggil, apabila animasi elemen berakhir (janjinya dilaksanakan berjaya). Fungsi menerima `animation` (dalam bentuk janji) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara automatik diselesaikan).
`fail`	Fungsi yang dipanggil, apabila animasi elemen berakhir dengan ralat (janjinya dilaksanakan dengan ralat). Fungsi menerima `animation` (dalam bentuk janji) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara automatik diselesaikan).
`always`	Fungsi yang dipanggil, apabila animasi elemen selesai atau dihentikan tanpa penyelesaian (janjinya dilaksanakan berjaya atau dengan ralat). Fungsi menerima `animation` (dalam bentuk janji) dan `jumpedToEnd` (Nilai Boolean. Jika `true`, maka animasi secara automatik diselesaikan).

Contoh

Mari apabila butang #left ditekan, kita alihkan segi empat hijau ke kiri, dan butang #right ke kanan sebanyak 50px, juga tetapkan tempoh kepada 600ms - dengan perintah slow:

<button id="left">left</button>
<button id="right">right</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

kaedah show,
yang menunjukkan elemen secara lancar
kaedah stop,
yang membenarkan menghentikan animasi yang telah dimulakan
kaedah delay,
yang menetapkan kelewatan pelaksanaan peristiwa
sifat jQuery.fx.off,
yang membenarkan mematikan animasi secara global
penilih animated,
yang memilih elemen, yang pada masa ini terlibat dalam animasi