Радња након завршетка ефекта у jQuery

Понекад вам може требати да извршите неку радњу након завршетка ефекта. На пример, при клику на дугме неки блок би требало да се постепено сакрије и тек након тога, када се потпуно сакрије, треба нешто да се прикаже на екрану.

Ако само пишете линије кода једна за другом - елемент још неће стићи да се сакрије, када ће почети да се извршава следећа линија кода - и добићете не оно што смо желели. Кликните на дугме - елемент ће почети да се крије и одмах ће се променити текст дугмета.

Погледајте следећи пример. Претпоставимо да имамо следећи HTML код:

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

За овај код додат је CSS:

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

Javascript код изгледа овако:

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

Да бисте избегли овакве проблеме, у свим методама за рад са анимацијом и ефектима постоји тај опциони параметар, у који можемо проследити callback-функцију, која ће се извршити након завршетка анимације. У нашем случају смо проследили callback-функцију у метод hide, и већ у телу те функције променили назив дугмета:

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