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