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');
  });
});