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:

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

Dla tego kodu zdefiniowano CSS:

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

Kod Javascript wygląda tak:

javascript$('#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:

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