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