Tindakan Selepas Kesan Berakhir dalam jQuery

Kadangkala anda mungkin perlu melakukan sesuatu tindakan selepas kesan berakhir. Sebagai contoh, apabila butang ditekan, sesuatu blok perlu disembunyikan secara perlahan dan hanya selepas ia benar-benar hilang, barulah sesuatu perlu dipaparkan pada skrin.

Jika hanya menulis baris kod satu demi satu - elemen belum sempat disembunyikan, baris kod seterusnya sudah mula dilaksanakan - dan hasilnya bukanlah seperti yang kita inginkan. Tekan butang - elemen akan mula menyembunyikan diri dan teks butang akan berubah serta-merta.

Lihat contoh berikut. Katakan kita mempunyai kod HTML berikut:

<button id="hide">hide</button>
<div id="elem">text...</div>

CSS berikut ditulis untuk kod ini:

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

Kod Javascript kelihatan seperti ini:

$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('hidden');
});

Untuk mengelakkan masalah sedemikian, dalam semua kaedah yang berurusan dengan animasi dan kesan, disediakan parameter pilihan, di mana kita boleh menghantar fungsi callback, yang akan dilaksanakan selepas animasi berakhir. Dalam kes kami, kami menghantar fungsi callback kepada kaedah hide, dan dalam badan fungsi itu menukar nama butang:

$('#hide').click(function() {
	$('#elem').hide(1000, function() {
		$('#hide').html('hidden');
	});
});