fadeIn metodu
fadeIn metodu gizlenen elementleri
ýumşak görkezýär, olary däl-şeffaf edýär.
Elementleri gizlemek üçin
fadeOut
metodyny ulanyp bolýar,
olary şeffaf edýär.
Sintaksis
Berlen wagtyň dowamynda görkezmek,
adaty bolup 400ms:
.fadeIn(dowamlylyk);
Wagty diňe millisekundlarda däl, eýsem
açar sözler bilen hem kesgitlemek bolýar: slow (600ms)
we fast (200ms), baha näçe uly bolsa,
animasiýa şonça haýal:
.fadeIn('slow' ýa-da 'fast');
Eger parametrleri görkezmezseňiz - animasiýa bolmaz, elementler derrew görkeziler:
.fadeIn();
Ýene-de ikinji parametr hökmünde ýumşaklyk funksiýasyny, üçünji parametr hökmünde bolsa callback-funksiýany (animasiýa gutaran soň işleýär) geçirmek bolýar. Her iki parametr hem hökman däl:
.fadeIn(dowamlylyk, [ýumşaklyk funksiýasy], [callback-funksiýasy]);
Metoda dürli opsionalary, JavaScript obyekti görnüşinde, öz içine alýan jübütler açar: baha geçirmek bolýar:
.fadeIn(options);
Şeýle bir obyekt aşakdaky parametrleri we
funksiýalary geçirip biler - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Bu
parametrleriň düşündirişini
animate
metody üçin görmek bolýar. Mysal üçin,
dowamlylygy we ýumşaklyk funksiýasyny kesgitläýäris:
.fadeIn( {duration: 800, easing: easeInSine} );
Mysal
Aşakdaky mysalda düwmä #hide basylanynda
#test elementi fadeOut metody
ýardymynda gizleniler,
#show düwmesine basylanynda bolsa,
fadeIn ýardymynda görkeziler. Şeýle hem biz
tizligi 1000ms edip kesgitleýäris:
<button id="hide">gizle</button>
<button id="show">görkez</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);
});
Mysal
Indiki mysalda animasiýa gutaran soň
#test elementi görkezilende biz
'!' tekstli habary çykararys,
gizlenende bolsa
'?' tekstli habary:
<button id="hide">gizle</button>
<button id="show">görkez</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('?');
});
});
