Метод 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,
у элементларнинг хоссаларини анимация қилади