Akcia po skončení efektu v jQuery

Niekedy môžete potrebovať vykonať nejakú akciu po skončení efektu. Napríklad, po kliknutí na tlačidlo by sa mal nejaký blok plynulo skryť a až potom, keď je úplne skrytý, je potrebné niečo zobraziť na obrazovke.

Ak budete písať riadky kódu jeden za druhým - prvok sa ešte nestihne skryť, ako sa začne vykonávať ďalší riadok kódu - a výsledok nebude taký, aký by sme chceli. Kliknite na tlačidlo - prvok sa začne skrývať a okamžite sa zmení text tlačidla.

Pozrite si nasledujúci príklad. Predpokladajme, že máme nasledujúci HTML kód:

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

K tomuto kódu je napísaný CSS:

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

Javascript kód vyzerá takto:

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

Aby ste sa vyhli takýmto problémom, vo všetkých metódach pre prácu s animáciou a efektmi je poskytnutý tento voliteľný parameter, do ktorého môžeme odovzdať callback-funkciu, ktorá sa vykoná po skončení animácie. V našom prípade sme odovzdali callback-funkciu do metódy hide, a už v tele tejto funkcie sme zmenili názov tlačidla:

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