Veiksmas po efekto pabaigos jQuery

Kartais jums gali tekti atlikti kokį nors veiksmą po efekto pabaigos. Pavyzdžiui, paspaudus mygtuką koks nors blokas turėtų sklandžiai pasislėpti ir tik po to, kai jis visiškai pasislėps, reikia ką nors išvesti į ekraną.

Jei tiesiog rašysime kodo eilutes vieną po kitos - elementas nespėjes pasislėpti, kaip jau pradės vykdytis kita kodo eilutė - ir gausis ne tai, ko norėtume. Paspauskite mygtuką - elementas pradės slėptis ir iškart pasikeis mygtuko tekstas.

Pažvelkite į šį pavyzdį. Tarkime, kad turime šį HTML kodą:

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

Šiam kodui parašytas CSS:

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

Javascript kodas atrodo taip:

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

Kad išvengtume tokių problemų, visuose metoduose dirbant su animacija ir efektais numatytas toks neprivalomas parametras, į kurį galime perduoti callback funkciją, kuri vyks po animacijos pabaigos. Mūsų atveju mes perėjome callback funkciją į metodą hide, ir jau šios funkcijos kūne pakeitėme mygtuko pavadinimą:

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