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