Działanie po zakończeniu efektu w jQuery

Czasami może zaistnieć potrzeba wykonania jakiejś czynności po zakończeniu efektu. Na przykład, po kliknięciu przycisku jakiś blok powinien płynnie zniknąć i dopiero po jego całkowitym zniknięciu należy coś wyświetlić na ekranie.

Jeśli po prostu zapiszesz linie kodu jedna po drugiej - element nie zdąży się ukryć, a kolejna linia kodu zacznie się wykonywać - i otrzymasz coś innego niż byśmy chcieli. Kliknij przycisk - element zacznie znikać i natychmiast zmieni się tekst przycisku.

Spójrz na następujący przykład. Załóżmy, że mamy następujący kod HTML:

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

Dla tego kodu zdefiniowano CSS:

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

Kod Javascript wygląda tak:

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

Aby uniknąć takich problemów, we wszystkich metodach do pracy z animacjami i efektami przewidziano taki opcjonalny parametr, do którego możemy przekazać funkcję callback, która wykona się po zakończeniu animacji. W naszym przypadku przekazaliśmy funkcję callback do metody hide, i już w ciele tej funkcji zmieniliśmy nazwę przycisku:

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