Veprim pas përfundimit të efektit në jQuery

Ndonjëherë mund t'ju duhet të kryeni ndonjë veprim pas përfundimit të një efekti. Për shembull, duke klikuar në një buton, një bllok duhet të fshihet pa u ndjerë dhe vetëm pasi të fshihet plotësisht, duhet të shfaqet diçka në ekran.

Nëse thjesht shkruani rreshta kodi njëri pas tjetrit - elementi nuk do të ketë kohë të fshihet, kur fillon të ekzekutohet rreshti tjetër i kodit - dhe rezultati nuk do të jetë ai që dëshironim. Klikoni në buton - elementi do të fillojë të fshihet dhe menjëherë do të ndryshojë teksti i butonit.

Shikoni shembullin e mëposhtëm. Le të themi se kemi kodin HTML të mëposhtëm:

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

Për këtë kod është shkruar CSS:

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

Kodi Javascript duket kështu:

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

Për të shmangur probleme të tilla, në të gjitha metodat për të punuar me animacione dhe efekte është parashikuar një parametër jo i detyrueshëm, në të cilin ne mund të kalojmë një funksion callback, i cili do të ekzekutohet pas përfundimit të animacionit. Në rastin tonë, ne kaluam funksionin callback në metodën hide, dhe tashmë në trupin e këtij funksioni ndryshuam emrin e butonit:

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