fadeIn metodi
fadeIn metodi yashirin elementlarni sekinlik bilan
ko'rsatadi, ularni shaffof bo'lmagan qiladi. Elementlarni
yashirish uchun ularni shaffof qiladigan
fadeOut
metodidan foydalanish mumkin.
Sintaksis
Belgilangan vaqt davomida ko'rsatish,
400ms standart hisoblanadi:
.fadeIn(davomiylik);
Vaqtni faqat millisekundlarda emas, balki kalit so'zlar
bilan ham belgilash mumkin: slow (600ms)
va fast (200ms), qiymat qancha katta bo'lsa,
animatsiya shuncha sekinroq bo'ladi:
.fadeIn('slow' yoki 'fast');
Agar parametrlarni ko'rsatmasangiz - animatsiya bo'lmaydi, elementlar darhol ko'rinadi:
.fadeIn();
Ikkinchi parametr sifatida silliqlik funktsiyasini ham o'tkazish mumkin, shuningdek, uchinchi parametr sifatida callback-funksiyani - u animatsiya tugagandan so'ng ishlaydi. Ikkala parametr ham ixtiyoriy:
.fadeIn(davomiylik, [silliqlik funktsiyasi], [callback-funksiya]);
Metodga turli xil opsiyalarni, JavaScript obyekti shaklida, o'tkazish mumkin, unda kalit: qiymat juftliklari bo'ladi:
.fadeIn(options);
Bunday obyekt quyidagi parametrlar va funktsiyalarni
o'tkazishi mumkin - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Ushbu
parametrlarning tavsifini siz
animate metodi uchun ko'rishingiz mumkin. Masalan,
davomiylik va silliqlik funktsiyasini o'rnatamiz:
.fadeIn( {duration: 800, easing: easeInSine} );
Misol
Quyidagi misolda #hide tugmasi bosilganda
#test elementi fadeOut metodi yordamida
yashirinadi, #show tugmasi bosilganda esa -
fadeIn metodi yordamida ko'rinadi. Shuningdek, biz
tezlikni 1000ms ga o'rnatamiz:
<button id="hide">yashir</button>
<button id="show">ko'rsat</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 tugagach, biz
'!' matnli xabarni chiqaramiz,
yashirishda esa
'?' matnli xabarni chiqaramiz:
<button id="hide">yashir</button>
<button id="show">ko'rsat</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('?');
});
});
