Dejanje po končanem učinku v jQuery

Včasih boste morda želeli izvesti kakršno koli dejanje po končanem učinku. Na primer, ob kliku na gumb naj se določen blok gladko skrije in šele potem, ko se popolnoma skrije, je treba nekaj prikazati na zaslonu.

Če preprosto pišete vrstice kode eno za drugo - se element še ne bo uspel skriti, ko se bo začela izvajati naslednja vrstica kode - in rezultat bo drugačen, kot smo želeli. Kliknite na gumb - element se bo začel skrivati in takoj se bo spremenil besedilo gumba.

Oglejte si naslednji primer. Recimo, da imamo naslednjo HTML kodo:

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

Za to kodo je definiran CSS:

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

Javascript koda je videti takole:

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

Da se izognemo takšnim težavam, so v vseh metodah za delo z animacijo in učinki predvideni neobvezni parameter, v katerega lahko predamo callback-funkcijo, ki se izvede po končani animaciji. V našem primeru smo predali callback-funkcijo v metodo hide, in že v telesu te funkcije spremenili besedilo gumba:

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