Дзеянне пасля заканчэння эфекту ў jQuery

Часам вам можа спатрэбіцца выканаць якое-небудзь дзеянне пасля заканчэння эфекту. Напрыклад, па націску на кнопку нейкі блок павінен плаўна схавацца і толькі пасля таго, як ён канчаткова схаваецца, трэба нешта вывесці на экран.

Калі проста пісаць радкі кода адна за адной - элемент яшчэ не паспее схавацца, як пачне выконвацца наступная радок кода - і атрымаецца не тое, што мы хацелі б. Націсніце на кнопку - элемент пачне хавацца і адразу ж зменіцца тэкст кнопкі.

Глядзіце на наступны прыклад. Хай у нас ёсць наступны HTML код:

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

Да дадзенага кода напісаны CSS:

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

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

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

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

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