jQuery-da effekt tugagandan so‘nggi harakat

Ba'zan sizga effekt tugagandan so'ng qandaydir harakatni bajarish talab qilinishi mumkin. Masalan, tugmani bosganda ma'lum bir blok sekinlik bilan yashirilishi kerak va faqat u butunlay yashirilgandan so'ng, ekranda biron narsa chiqarish kerak.

Agar kod satrlarini ketma-ket yozsak - element hali yashirilishiga ulgurmaganida, keyingi kod satri bajarila boshlaydi - va biz xohlagan natija chiqmaydi. Tugmani bosing - element yashirila boshlaydi va darhol tugma matni o'zgaradi.

Quyidagi misolga qarang. Faraz qilaylik, bizda quyidagi HTML kodi mavjud:

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

Ushbu kod uchun CSS yozilgan:

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

Javascript kodi quyidagicha ko'rinadi:

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

Bunday muammolarning oldini olish uchun, animatsiya va effektlar bilan ishlashning barcha usullarida ixtiyoriy parametr mavjud, unga biz animatsiya tugagandan so'ng bajariladigan callback-funksiyani uzatishimiz mumkin. Bizning holatda, biz callback-funksiyani hide usuliga uzatdik, va allaqachon ushbu funksiya tarkibida tugma nomini o'zgartirdik:

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