Åtgärd efter effektens slut i jQuery

Ibland kan du behöva utföra någon åtgärd efter att en effekt har avslutats. Till exempel, när du klickar på en knapp ska ett visst block döljas mjukt och först efter att det har döljts helt behöver något visas på skärmen.

Om du bara skriver kodraderna en efter en - hinns elementet inte döljas innan nästa kodrad börjar köras - och resultatet blir inte vad vi önskade. Klicka på knappen - elementet börjar döljas och texten på knappen ändras omedelbart.

Titta på följande exempel. Låt oss säga att vi har följande HTML-kod:

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

Följande CSS är skriven för denna kod:

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

Javascript-koden ser ut så här:

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

För att undvika sådana problem finns det i alla metoder för att arbeta med animationer och effekter en valfri parameter, där vi kan skicka en callback-funktion som kommer att köras efter att animationen har avslutats. I vårt fall skickade vi en callback-funktion till metoden hide, och i funktionens kropp ändrade vi knappens text:

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