Действие после окончания эффекта в jQuery

Иногда вам может потребоваться выполнить какое-либо действие после окончания эффекта. К примеру, по нажатию на кнопку какой-то блок должен плавно спрятаться и только после того, как он окончательно спрячется, нужно что-то вывести на экран.

Если просто писать строчки кода одна за одной - элемент еще не успеет спрятаться, как начнет выполнятся следующая строчка кода - и получится не то, что мы хотели бы. Нажмите на кнопку - элемент начнет скрываться и сразу же поменяется текст кнопки.

Смотрите на следующий пример. Пусть у нас есть следующий HTML код:

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

К данному коду прописан CSS:

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

Javascript код выглядит так:

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

Чтобы избежать таких проблем, во всех методах по работе с анимацией и эффектами предусмотрен такой необязательный параметр, в который мы можем передать callback-функцию, которая выполнится после окончания анимации. В нашем случае мы передали callback-функцию в метод hide, и уже в теле этой функции сменили название кнопки:

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