fadeOut metodu

fadeOut metodu elementləri rəvan şəkildə gizlədir. Elementləri yenidən göstərmək üçün fadeIn metodu istifadə edilə bilər, onları qeyri-şəffaf edərək.

Sintaksis

Müəyyən edilmiş müddət ərzində göstərmək, 400ms standart olaraq:

javascript.fadeOut(muddet);

Müddət yalnız millisaniyələrlə deyil, həm də açar sözlərlə slow (600ms) və fast (200ms) ilə müəyyən edilə bilər, dəyər nə qədər böyükdürsə, animasiya bir o qədər yavaş olar:

javascript.fadeOut('slow' ya da 'fast');

Əgər parametrlər göstərilməsə - animasiya baş verməyəcək, elementlər ani şəkildə gizlədiləcək:

javascript.fadeOut();

Həmçinin ikinci parametr kimi rəvanlıq funksiyası ötürülə bilər, eləcə də üçüncü callback funksiyası - animasiya bitdikdən sonra işləyəcək. Hər iki parametr isteğe bağlıdır:

javascript.fadeOut(muddet, [ravanliq funksiyası], [callback funksiyası]);

Metoda müxtəlif seçimlər ötürülə bilər, JavaScript obyekti şəklində, ehtiva edən açar: dəyər cütləri:

javascript.fadeOut(seçimlər);

Belə bir obyekt aşağıdakı parametrləri və funksiyaları ötürə bilər - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Bu parametrlərin təsvirini animate metodu üçün baxa bilərsiniz. Məsələn, müddəti və rəvanlıq funksiyasını təyin edək:

javascript.fadeOut( {duration: 800, easing: easeInSine} );

Nümunə

Aşağıdakı nümunədə #hide düyməsinə kliklənildikdə #test elementi fadeOut metodu ilə gizlədiləcək, #show düyməsinə kliklənildikdə isə - göstəriləcək, fadeIn ilə. Həmçinin sürəti 1000ms olaraq təyin edəcəyik:

html<button id="hide">gizlət</button>
<button id="show">göster</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Nümunə

Aşağıdakı nümunədə isə #test elementinin göstərilməsi animasiyası bitdikdən sonra biz '!' mətnli mesaj çıxardacağıq, gizləndikdə isə '?' mətnli mesaj çıxardacağıq:

html<button id="hide">gizlət</button>
<button id="show">göster</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Həmçinin baxın