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:
.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:
.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:
.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:
.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:
.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:
.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:
<button id="hide">gizlət</button>
<button id="show">göster</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#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:
<button id="hide">gizlət</button>
<button id="show">göster</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
