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:

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

Ushbu kod uchun CSS yozilgan:

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

Javascript kodi quyidagicha ko'rinadi:

javascript$('#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:

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