FadeIn metodu
fadeIn metodu gizli
elementləri rəvan şəkildə göstərir,
onları opaq edir. Elementləri
fadeOut
metodundan istifadə edərək,
onları şəffaf edərək gizlədə bilərsiniz.
Sintaksis
Müəyyən edilmiş müddət ərzində göstərmək,
400ms standart olaraq:
.fadeIn(müddət);
Müddəti təkcə millisaniyələrlə deyil,
həm də açar sözlərlə slow (600ms)
və fast (200ms) təyin etmək olar,
dəyər nə qədər böyükdürsə, animasiya bir o qədər yavaş olar:
.fadeIn('slow' və ya 'fast');
Əgər parametrləri göstərməsəniz - animasiya olmayacaq, elementlər ani şəkildə göstəriləcək:
.fadeIn();
Həmçinin ikinci parametr kimi rəvanlıq funksiyasını ötürmək olar, üçüncü parametr kimi isə callback funksiyasını - animasiya bitdikdən sonra işləyəcək. Hər iki parametr isteğe bağlıdır:
.fadeIn(müddət, [rəvanlıq funksiyası], [callback funksiyası]);
Metoda müxtəlif opsiyalar ötürmək olar, JavaScript obyekti şəklində, içində açar: dəyər cütləri olan:
.fadeIn(opsiyalar);
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:
.fadeIn( {duration: 800, easing: easeInSine} );
Nümunə
Aşağıdakı nümunədə #hide düyməsinə klikləndikdə
#test elementi
fadeOut metodu ilə
gizlədiləcək,
#show düyməsinə klikləndikdə isə - göstəriləcək,
fadeIn ilə. Həmçinin sürəti
1000ms olaraq təyin edəcəyik:
<button id="hide">hide</button>
<button id="show">show</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 elementini göstərmə animasiyası bitdikdən sonra
biz '!' mətnli mesaj çıxardacağıq,
gizləndikdə isə
'?' mətnli mesaj çıxardacağıq:
<button id="hide">hide</button>
<button id="show">show</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('?');
});
});
