Akcija po završetku efekta u jQuery

Ponekad vam može zatrebati da izvršite neku akciju nakon završetka efekta. Na primer, klikom na dugme neki blok treba da se glatko sakrije i tek nakon što se potpuno sakrije, treba nešto da se prikaže na ekranu.

Ako jednostavno pišete linije koda jednu za drugom - element još neće uspeti da se sakrije, a već će početi da se izvršava sledeća linija koda - i ispašće nešto što nismo želeli. Pritisnite dugme - element će početi da se skriva i odmah će se promeniti tekst na dugmetu.

Pogledajte sledeći primer. Neka imamo sledeći HTML kod:

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

Za ovaj kod je napisan CSS:

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

Javascript kod izgleda ovako:

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

Da bismo izbegli takve probleme, u svim metodima za rad sa animacijama i efektima postoji taj opcioni parametar, u koji možemo proslediti callback-funkciju, koja će se izvršiti nakon završetka animacije. U našem slučaju, prosledili smo callback-funkciju metodu hide, i tek u telu te funkcije promenili naziv dugmeta:

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