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