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