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