Метад fadeToggle

Метад fadeToggle па чарзе плаўна паказвае або схавае элементы, анімуючы іх празрыстасць.

Сінтаксіс

Паказ/схаванне за зададзены час, 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,
які мяняе празрыстасць элементаў
метад toggle,
які чаргуе плаўны паказ/схаванне элементаў
метад animate,
які анімуе ўласцівасці элементаў