Действие после окончания эффекта в 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');
  });
});