Метод fadeIn
Метод fadeIn яширин элементларни
секин намойиш этади, уларни опқ-саф қилиб. Элементларни
метод fadeOut
ёрдамида яшириш мумкин,
уларни шaffоф қилиб.
Синтаксис
Берилган вақтда намойиш этиш,
400мс суньий холда:
.fadeIn(давомлилик);
Вақтни фақат миллисонияларда эмас,
балки калит сўзлар билан ҳам белгилаш мумкин
slow (600мс)
ва fast (200мс), қиймат қанча катта бўлса,
анимация шунча секинрок бўлади:
.fadeIn('slow' ёки 'fast');
Агар параметрлар кўрсатилмаса - анимация бўлмайди, элементлар дариҳол намойиш бўлади:
.fadeIn();
Шунингдек, иккинчи параметр сифатида силлиқлик функциясини, ва uchinchi параметр сифатида callback-функцияни - анимация тугаганидан кейин ишлайди. Ушбу параметрлар ихтиёрий:
.fadeIn(давомлилик, [силлиқлик функцияси], [callback-функция]);
Методга турли хил опцияларни бериш мумкин, JavaScript объекти шаклида, ичида калит: қиймат жуфтлари:
.fadeIn(options);
Бундай объект quyidagi параметрлар ва функцияларни
uzatishi мумкин - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Бу
параметрларнинг тавсифини сиз метод
animate учун кўра оласиз. Масалан,
давомлилик ва силлиқлик функциясини ўрнатамиз:
.fadeIn( {duration: 800, easing: easeInSine} );
Мисол
Quyidagi мисолда тугмани босганда
#hide элемент #test билан
метод fadeOut ёрдамида яшириб қўйилади,
ва #show тугмаси босилганда - намойиш бўлади,
fadeIn ёрдамида. Шунингдек, биз тезликни
1000мс га ўрнаймиз:
<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);
});
Мисол
Ва кейинги мисолда анимация тугаганидан кейин
элемент #test ни намойиш этишда биз
хабар чиқарамиз
'!' матни билан, ва яширишда
'?' матни билан:
<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('?');
});
});
