Acțiune după terminarea efectului în jQuery

Uneori poate fi necesar să executați o acțiune după terminarea efectului. De exemplu, la click pe un buton, un bloc ar trebui să se ascundă gradual și abia după ce s-a ascuns complet, trebuie să afișați ceva pe ecran.

Dacă scrieți linii de cod una după alta - elementul nu va avea timp să se ascundă, când va începe să se execute următoarea linie de cod - și se va întâmpla nu ceea ce am dori. Apăsați pe buton - elementul va începe să se ascundă și imediat se va schimba textul butonului.

Uitați-vă la următorul exemplu. Să presupunem că avem următorul cod HTML:

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

Pentru acest cod este scris CSS:

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

Codul Javascript arată astfel:

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

Pentru a evita astfel de probleme, în toate metodele de lucru cu animații și efecte este prevăzut un astfel de parametru opțional, în care putem transmite o funcție callback, care se va executa după terminarea animației. În cazul nostru, am transmis funcția callback în metoda hide, și deja în corpul acestei funcții am schimbat textul butonului:

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