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:

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

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

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

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

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

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