Darbība pēc efekta beigām jQuery

Dažreiz jums var būt nepieciešams izpildīt kādu darbību pēc efekta beigām. Piemēram, noklikšķinot uz pogas, kāds bloks vajadzētu vienmērīgi paslēpties, un tikai pēc tā, kad tas ir pilnībā paslēpies, ir nepieciešams kaut ko parādīt ekrānā.

Ja vienkārši rakstīt koda rindiņas vienu pēc otras - elements vēl nebūs paspējis paslēpties, kad sāksies izpildīties nākamā koda rindiņa - un izradīsies ne tas, ko mēs vēlētos. Nospiediet pogu - elements sāks slēpties un uzreiz mainīsies pogas teksts.

Skatieties uz šo piemēru. Pieņemsim, ka mums ir šāds HTML kods:

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

Šim kodam ir pievienots CSS:

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

Javascript kods izskatās šādi:

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

Lai izvairītos no šādām problēmām, visās metodēs darbam ar animāciju un efektiem ir paredzēts šāds neobligāts parametrs, kurā mēs varam padot callback funkciju, kas izpildīsies pēc animācijas beigām. Mūsu gadījumā mēs padodam callback funkciju metodē hide, un jau šīs funkcijas ķermenī mainījām pogas nosaukumu:

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