Дзеянне пасля заканчэння эфекту ў 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');
	});
});