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