Acțiune după terminarea efectului în jQuery

Uneori poate fi necesar să executați o acțiune după terminarea efectului. De exemplu, la click pe un buton, un bloc ar trebui să se ascundă gradual și abia după ce s-a ascuns complet, trebuie să afișați ceva pe ecran.

Dacă scrieți linii de cod una după alta - elementul nu va avea timp să se ascundă, când va începe să se execute următoarea linie de cod - și se va întâmpla nu ceea ce am dori. Apăsați pe buton - elementul va începe să se ascundă și imediat se va schimba textul butonului.

Uitați-vă la următorul exemplu. Să presupunem că avem următorul cod HTML:

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

Pentru acest cod este scris CSS:

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

Codul Javascript arată astfel:

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

Pentru a evita astfel de probleme, în toate metodele de lucru cu animații și efecte este prevăzut un astfel de parametru opțional, în care putem transmite o funcție callback, care se va executa după terminarea animației. În cazul nostru, am transmis funcția callback în metoda hide, și deja în corpul acestei funcții am schimbat textul butonului:

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