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