Efekti lõppedes tegevuse käivitamine jQuery-s

Vahel võib tekkida vajadus käivitada mõni tegevus peale efekti lõppu. Näiteks, nupu vajutamisel peaks mõni plokk sujuvalt kaduma ja alles siis, kui see on täielikult peidetud, tuleks ekraanile midagi välja kuvada.

Kui lihtsalt kirjutada koodijupid üksteise järel - element ei jõua veel peituda, kui järgmine koodirida hakkab juba täituma - ja tulemuseks pole see, mida me sooviksime. Vajuta nupule - element hakkab kaduma ja kohe muutub ka nupu tekst.

Vaadake järgmist näidet. Olgu meil järgmine HTML kood:

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

Sellele koodile on kirjutatud CSS:

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

Javascript kood näeb välja selline:

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

Selliste probleemide vältimiseks on kõikides animatsiooni- ja efektimeetodites ette nähtud valikuline parameeter, kuhu saame edastada callback-funktsiooni, mis käivitatakse peale animatsiooni lõppu. Meie puhul edastasime callback-funktsiooni meetodisse hide, ja juba selle funktsiooni kehas muutsime nupu teksti:

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