Метод fadeToggle

Метод fadeToggle элементларни навбатма-навбат муносаб равишда кўрсатади ёки беркитади, уларнинг шaffофлигини анимация килади.

Синтаксис

Берилган вақт давомида кўрсатиш/беркитиш, сунуий холда 400мс:

.fadeToggle(давомийлик);

Вақтни факат миллисонияларда эмас, балки калит сўзлар slow (600мс) ва fast (200мс) билан хам белгилаш мумкин, қиймат катта бўлса, анимация секинрок бўлади:

.fadeToggle('slow' ёки 'fast');

Агар параметрларни кўрсатмасангиз - анимация бўлмайди, элементлар бир дақиқада кўриниб/йўқолади:

.fadeToggle();

Шунингдек, иккинчи параметр сифатида муносаблик функциясини, ва унинчи параметр сифатида эса callback-функцияни - анимация тугаганидан кейин ишлайди. У иккала параметр ихтиёрий:

.fadeToggle(давомийлик, [муносаблик функцияси], [callback-функция]);

Методга турли хил опцияларни бериш мумкин, JavaScript объекти шаклида, ичида калит: қиймат жуфтлари:

.fadeToggle(options);

Бундай объект куйидаги параметрлар ва функцияларни ўтказиши мумкин - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Бу параметрларнинг тавсифини сиз метод учун animate да кўра оласиз. Масалан, давомийлик ва муносаблик функциясини ўрнатамиз:

.fadeToggle( {duration: 800, easing: easeInSine} );

Мисол

Куйидаги мисолда тугмани биринчи марта босганда #toggle элемент #test билан беркитилади, ва кайта босилганда - кўрсатилади. Буни учун биз fadeToggle методдан фойдаланамиз. Шунингдек биз тезликни 1000мс га ва муносаблик функциясининг қийматини linear га ўрнаймиз:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Шунингдек кўринг

метод slideToggle,
элементларни муносаб кўрсатиш/беркитишни алмаштиради
метод fadeTo,
элементларнинг шaffофлигини ўзгартиради
метод toggle,
элементларни муносаб кўрсатиш/беркитишни алмаштиради
метод animate,
элементлар хоссаларини анимация килади