Tindakan Setelah Efek Selesai di jQuery

Terkadang Anda mungkin perlu menjalankan tindakan tertentu setelah efek berakhir. Misalnya, saat tombol ditekan, suatu blok harus disembunyikan secara halus dan hanya setelah blok tersebut benar-benar tersembunyi, barulah sesuatu perlu ditampilkan di layar.

Jika kita hanya menulis baris kode satu per satu - elemen belum sempat disembunyikan, ketika baris kode berikutnya mulai dieksekusi - dan hasilnya akan berbeda dengan yang kita inginkan. Tekan tombol - elemen akan mulai menyembunyikan diri dan teks tombol akan segera berubah.

Perhatikan contoh berikut. Misalkan kita memiliki kode HTML berikut:

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

Kode CSS berikut diterapkan pada kode ini:

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

Kode Javascript terlihat seperti ini:

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

Untuk menghindari masalah seperti ini, semua metode yang berhubungan dengan animasi dan efek menyediakan parameter opsional, di mana kita dapat melewatkan fungsi callback, yang akan dieksekusi setelah animasi selesai. Dalam kasus kami, kami meneruskan fungsi callback ke metode hide, dan di dalam badan fungsi tersebut, kami mengubah teks tombol:

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