Радња након завршетка ефекта у jQuery

Понекад вам може требати да извршите неку радњу након завршетка ефекта. На пример, при клику на дугме неки блок би требало да се постепено сакрије и тек након тога, када се потпуно сакрије, треба нешто да се прикаже на екрану.

Ако само пишете линије кода једна за другом - елемент још неће стићи да се сакрије, када ће почети да се извршава следећа линија кода - и добићете не оно што смо желели. Кликните на дугме - елемент ће почети да се крије и одмах ће се променити текст дугмета.

Погледајте следећи пример. Претпоставимо да имамо следећи HTML код:

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

За овај код додат је CSS:

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

Javascript код изгледа овако:

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

Да бисте избегли овакве проблеме, у свим методама за рад са анимацијом и ефектима постоји тај опциони параметар, у који можемо проследити callback-функцију, која ће се извршити након завршетка анимације. У нашем случају смо проследили callback-функцију у метод hide, и већ у телу те функције променили назив дугмета:

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