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