A hatás befejezése utáni művelet a jQuery-ben

Időnként szükség lehet valamilyen művelet végrehajtására egy hatás befejezése után. Például, amikor egy gombra kattintunk, egy blokknak simán el kell tűnnie, és csak azután, hogy teljesen eltűnt, kell valamit megjeleníteni a képernyőn.

Ha egyszerűen egymás után írjuk a kódsorokat - az elem még nem tud eltűnni, mielőtt a következő kódsor végrehajtása elkezdődne - és az lesz ami nem azt kapjuk, amit szeretnénk. Kattints a gombra - az elem elrejtődni kezd, és azonnal megváltozik a gomb szövege.

Nézd meg a következő példát. Tegyük fel, hogy a következő HTML kódunk van:

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

Ehhez a kódhoz a következő CSS tartozik:

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

A Javascript kód így néz ki:

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

Az ilyen problémák elkerülése érdekében az animációval és hatásokkal dolgozó összes metódus rendelkezik egy opcionális paraméterrel, amiben egy callback függvényt adhatunk át, amely a animáció befejezése után fut le. A mi esetünkben átadtuk a callback függvényt a hide metódusnak, és ennek a függvénynek a törzsében változtattuk meg a gomb szövegét:

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