Actie na het beëindigen van een effect in jQuery

Soms kan het nodig zijn om een actie uit te voeren nadat een effect is beëindigd. Bijvoorbeeld, wanneer op een knop wordt geklikt, moet een blok soepel worden verborgen en pas nadat het volledig is verdwenen, moet er iets op het scherm worden weergegeven.

Als je code regels gewoon achter elkaar schrijft - zal het element nog niet klaar zijn met verbergen, of de volgende code regel begint al met uitvoeren - en dan krijgen we niet wat we wilden. Klik op de knop - het element begint te verdwijnen en meteen verandert de tekst van de knop.

Bekijk het volgende voorbeeld. Stel dat we de volgende HTML code hebben:

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

Voor deze code is de volgende CSS geschreven:

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

De Javascript code ziet er als volgt uit:

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

Om dergelijke problemen te vermijden, is in alle methodes voor het werken met animaties en effecten een optionele parameter voorzien, waarin we een callback-functie kunnen doorgeven, die wordt uitgevoerd na het beëindigen van de animatie. In ons geval hebben we de callback-functie doorgegeven aan de methode hide, en in het lichaam van deze functie hebben we de tekst van de knop veranderd:

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