Handling etter slutten av effekten i jQuery

Noen ganger kan det hende du trenger å utføre en handling etter at en effekt er avsluttet. For eksempel, når du klikker på en knapp, skal en blokk skjules jevnt, og først etter at den er helt skjult, må noe vises på skjermen.

Hvis du bare skriver kodelinjer etter hverandre - vil elementet ikke ha tid til å skjules før neste kodelinje begynner å kjøre - og resultatet blir ikke det vi ønsket. Klikk på knappen - elementet begynner å skjules og teksten på knappen endres umiddelbart.

Se på følgende eksempel. La oss si at vi har følgende HTML-kode:

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

Følgende CSS er skrevet for denne koden:

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

Javascript-koden ser slik ut:

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

For å unngå slike problemer, har alle metodene for animasjon og effekter en valgfri parameter, der vi kan sende en callback-funksjon, som vil kjøre etter animasjonen er avsluttet. I vårt tilfelle sendte vi callback-funksjonen til metoden hide, og allerede i kroppen til denne funksjonen endret vi knappens navn:

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