Метод fadeTo
Метод fadeTo берылган қийматгача,
0 дан 1 гача бўлган диапозонда элементнинг
шaffофлигини
секин ўзгартиради.
Синтаксис
Давомлилик ва шaffофлик методдан фойдаланишнинг
ҳар қандай вариантида белгиланади.
Шаффофликнинг берылган вақт ичида ўзгариши,
400мс суньий холда:
.fadeTo(давомлилик, шaffофлик қиймати);
Вақтни фақат миллисонияларда эмас, балки
slow (600мс) ва fast (200мс)
калит сўзлари билан ҳам белгилаш мумкин, қиймат қанча катта бўлса,
анимация шунча секинрок бўлади:
.fadeTo('slow' ёки 'fast', шaffофлик қиймати);
Ҳамда учинчи (ихтиёрий) параметр сифатида callback-функцияни ўтказish мумкин - анимация бажарилганидан сўнг ишга тушadi:
.fadeTo(давомлилик, шaffофлик қиймати, [callback-функция]);
Ҳамда ўзгариш функцияси ва callback-функцияни (ихтиёрий параметрлар) ўтказish мумкин - анимация бажарилганидан сўнг ишга тушadi:
.fadeTo(давомлилик, шaffофлик қиймати, [ўзгариш функцияси], [callback-функция]);
Мисол
Кейинги мисолда, fadeTo методани ёрдамида
#hide тугмаси босилганда #test элементи
шаффофлиги 0.5 гача камайтириб яширилади,
#show тугмаси босилганда эса кўрсатилади:
<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').fadeTo(1000, 1);
});
$('#hide').on('click', function() {
$('#test').fadeTo(1000, 0.5);
});
Ҳам қаранг
-
метод
fadeToggle,
у элементларнинг шaffофлигини ўзгартиради -
метод
fadeIn,
у яширинган элементларни шaffоф бўлмаган қилиб, секин кўрсатади -
метод
animate,
у элементларнинг хоссаларини анимация қилади