fadeOut metodu
fadeOut metody elementleri
ýumuşak gizleýär. Elementleri görkezmek üçin
fadeIn
metodyny ulanyp, olary şaffaf däl etmek mümkin.
Sintaksis
Bellänen wagtyň dowamynda görkezme,
400 ms deslapky baha:
.fadeOut(dowamlylyk);
Wagt diňe millisekuntda däl, eýsem açar sözler
slow (600 ms)
we fast (200 ms) bilen hem belläp bolýar, baha uly boldukça,
animasiýa haýalrak:
.fadeOut('slow' ýa-da 'fast');
Eger parametrler görkezilmese - animasiýa bolmaz, elementler çalt gizleniler:
.fadeOut();
Ýumuşaklyk funksiýasyny ikinji parametr hökmünde hem geçirip bolýar, şeýle hem üçünji callback-funksiýa - animasiýa ýerine ýetirilenden soň işleýär. Iki parametri hem hökmany däl:
.fadeOut(dowamlylyk, [ýumuşaklyk funksiýasy], [callback-funksiýasy]);
Metoda dürli opsionalary geçirip bolýar, JavaScript obýekti görnüşinde, içinde açar: baha jüpleri bilen:
.fadeOut(options);
Şeýle obýekt 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 siz
animate metodi üçin görmegiňiz mümkin. Mysal üçin,
dowamlylygy we ýumuşaklyk funksiýasyny belleýäris:
.fadeOut( {duration: 800, easing: easeInSine} );
Mysal
Aşakdaky mysalda düwmä basylanda
#hide element bilen #test
fadeOut metody arkaly gizleniler,
#show düwmesi bilen bolsa görkeziler,
fadeIn arkaly. Şeýle hem biz tizligi
1000 ms belleýä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
Aşakdaky mysalda bolsa
animasiýa tamamlanandan soň
#test elementini görkezende biz
habar çykararys
'!' teksti bilen, gizlemez bolsa
'?' teksti bilen:
<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('?');
});
});
