Метод 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,
който анимира свойствата на елементите