Akce po skončení efektu v jQuery

Někdy může být potřeba provést nějakou akci po skončení efektu. Například po kliknutí na tlačítko by se nějaký blok měl plynule skrýt a teprve poté, co je kompletně skrytý, je potřeba něco zobrazit na obrazovce.

Pokud budete psát řádky kódu jeden za druhým - prvek se nestihne skrýt a již začne provádět další řádek kódu - a výsledek nebude takový, jaký bychom chtěli. Klikněte na tlačítko - prvek se začne skrývat a okamžitě se změní text tlačítka.

Podívejte se na následující příklad. Předpokládejme, že máme následující HTML kód:

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

K tomuto kódu je napsáno CSS:

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

Javascript kód vypadá takto:

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

Abychom se těmto problémům vyhnuli, všechny metody pro práci s animací a efekty mají k dispozici volitelný parametr, do kterého můžeme předat callback funkci, která se provede po skončení animace. V našem případě jsme předali callback funkci do metody hide, a již v těle této funkce jsme změnili text tlačítka:

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