Handling efter afslutning af effekt i jQuery

Sommetider kan du have brug for at udføre en handling efter afslutningen af en effekt. For eksempel, ved et klik på en knap skal en blok skjules glat og først efter den er helt skjult, skal noget vises på skærmen.

Hvis du bare skriver kodelinjer den ene efter den anden - vil elementet ikke nå at blive skjult, før den næste kodelinje begynder at udføres - og resultatet bliver ikke det, vi ønskede. Klik på knappen - elementet begynder at skjule sig og teksten på knappen ændres med det samme.

Se på følgende eksempel. Lad os sige, at vi har følgende HTML-kode:

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

Følgende CSS er anvendt på denne kode:

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

Javascript-koden ser sådan ud:

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

For at undgå sådanne problemer har alle metoder til arbejde med animation og effekter en valgfri parameter, hvori vi kan overføre en callback-funktion, som udføres efter animationen er afsluttet. I vores tilfælde overførte vi callback-funktionen til metoden hide, og i selve funktionens krop ændrede vi knappens tekst:

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