Toiminto efektin päättymisen jälkeen jQueryssä

Joskus saatat tarvita suorittaa jokin toiminto efektin päättyessä. Esimerkiksi, kun painat nappia, jonkin lohkon tulisi piilotua sulavasti ja vasta sitten, kun se on täysin piilossa, something needs to be displayed on the screen.

Jos kirjoitat koodirivit peräkkäin - elementti ei ehdi piiloutua ennen kuin seuraava koodirivi alkaa suorittua - ja tuloksena ei ole se, mitä toivoisimme. Paina nappia - elementti alkaa piiloutua ja saman tien vaihtuu napin teksti.

Katso seuraavaa esimerkkiä. Oletetaan, että meillä on seuraava HTML-koodi:

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

Tälle koodille on määritetty CSS:

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

Javascript-koodi näyttää tältä:

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

Tällaisten ongelmien välttämiseksi, kaikissa animaatioita ja efektejä käsittelevissä menetelmissä on tarjolla tämä valinnainen parametri, johon voimme antaa callback-funktion, joka suoritetaan animaation päättyessä. Tapauksessamme annoimme callback-funktion menetelmälle hide, ja jo tämän funktion sisällä vaihdoimme napin nimen:

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