jQuery-də effektin bitməsindən sonra hərəkət

Bəzən effekt bitdikdən sonra hansısa bir hərəkət yerinə yetirmək lazım gələ bilər. Məsələn, düyməyə kliklənildikdə hansısa bir blok yavaş-yavaş gizlənməli və yalnız o tamamilə gizləndikdən sonra ekranda bir şey göstərilməlidir.

Əgər kod sətirlərini bir-birinin ardınca sadəcə yazsanız - element hələ gizlənməyə vaxt tapmadan növbəti kod sətri icra olunmağa başlayacaq - və bizim istədiyimiz nəticə əldə olunmayacaq. Düyməyə basın - element gizlənməyə başlayacaq və dərhal düymənin mətni dəyişəcək.

Aşağıdakı nümunəyə baxın. Tutaq ki, bizim aşağıdakı HTML kodumuz var:

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

Bu kod üçün aşağıdakı CSS yazılıb:

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

Javascript kodu aşağıdakı kimi görünür:

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

Bu cür problemlərin qarşısını almaq üçün, animasiya və effektlərlə işləyən bütün metodlarda bizə animasiya bitdikdən sonra icra olunacaq callback-funksiyasını ötürə biləcəyimiz belə bir istəyə bağlı parametr nəzərdə tutulub. Bizim nümunəmizdə biz callback-funksiyasını hide metoduna ötürdük, və artıq bu funksiyanın daxilində düymənin adını dəyişdik:

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