Aksie na die einde van die effek in jQuery

Soms mag jy nodig hê om 'n aksie uit te voer na die einde van 'n effek. Byvoorbeeld, wanneer op 'n knoppie gedruk word, moet 'n blok geleidelik verdwyn en eers na dit heeltemal weggesteek is, moet iets op die skerm vertoon word.

As jy eenvoudig kode reëls een na die ander skryf - sal die element nie eers kans kry om weg te steek nie, voordat die volgende kode reël begin uitvoer - en die resultaat sal nie wees wat ons wou hê nie. Druk op die knoppie - die element sal begin wegsteek en die teks van die knoppie sal onmiddellik verander.

Kyk na die volgende voorbeeld. Gestel ons het die volgende HTML-kode:

<button id="hide">steek weg</button>
<div id="elem">teks...</div>

Aan hierdie kode is die volgende CSS gekoppel:

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

Die Javascript-kode lyk so:

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

Om sulke probleme te vermy, het alle metodes vir die hantering van animasie en effekte 'n opsionele parameter, waarin ons 'n callback-funksie kan deurgee, wat sal uitvoer na die einde van die animasie. In ons geval het ons die callback-funksie in die hide-metode deurgegee, en reeds in die liggaam van hierdie funksie die knoppie se naam verander:

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