Metod fadeOut
Metod fadeOut elementlarni sekinlik bilan yashiradi.
Elementlarni metod fadeIn
yordamida shaffof emas qilib ko‘rsatish mumkin.
Sintaksis
Belgilangan vaqt oralig‘ida ko‘rsatish,
standart 400ms:
.fadeOut(davomiylik);
Vaqtni faqat millisekundlarda emas, balki kalit so‘zlar
slow (600ms)
va fast (200ms) orqali ham belgilash mumkin,
qiymat qancha katta bo‘lsa, animatsiya shuncha sekinroq bo‘ladi:
.fadeOut('slow' yoki 'fast');
Agar parametrlarni ko‘rsatmasangiz - animatsiya bo‘lmaydi, elementlar darhol yashinadi:
.fadeOut();
Ikkinchi parametr sifatida silliqlik funksiyasini, shuningdek uchinchi parametr sifatida callback-funksiyani berish mumkin - u animatsiya tugagandan so‘ng ishga tushadi. Ikkala parametr ham ixtiyoriy:
.fadeOut(davomiylik, [silliqlik funksiyasi], [callback-funksiya]);
Metodga turli xil opsiyalarni, JavaScript obyekti ko‘rinishida, o‘z ichiga olgan kalit: qiymat juftliklarini berish mumkin:
.fadeOut(options);
Bunday obyekt quyidagi parametrlar va funksiyalarni
o‘tkazishi mumkin - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Ushbu
parametrlarning tavsifini siz metod
animate uchun ko‘rishingiz mumkin. Masalan,
davomiylik va silliqlik funksiyasini o‘rnatamiz:
.fadeOut( {duration: 800, easing: easeInSine} );
Misol
Quyidagi misolda #hide tugmasi bosilganda
#test elementi fadeOut metodi
yordamida yashirinadi,
#show tugmasi bosilganda esa -
fadeIn metodi yordamida ko‘rsatiladi.
Shuningdek, tezlikni 1000ms ga o‘rnatamiz:
<button id="hide">yashirish</button>
<button id="show">ko‘rsatish</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);
});
Misol
Quyidagi misolda esa
#test elementini ko‘rsatish animatsiyasi tugagandan so‘ng biz
'!' matnli xabarni chiqaramiz,
yashirish animatsiyasi tugaganda esa
'?' matnli xabarni chiqaramiz:
<button id="hide">yashirish</button>
<button id="show">ko‘rsatish</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('?');
});
});
