.fadeToggle( [duration ] [, easing ] [, complete ] )Возвращает: jQuery
Описание: Отобразить или скрыть сопоставленные элементы, анимируя их непрозрачность.
-
версия добавлена: 1.4.4.fadeToggle( [duration ] [, easing ] [, complete ] )
- duration (по умолчанию:
400)Строка или число, определяющие, как долго будет выполняться анимация. - easing (по умолчанию:
swing)Тип: СтрокаСтрока, указывающая, какую функцию плавного изменения использовать для перехода. - completeТип: Функция()Функция, вызываемая после завершения анимации, вызывается один раз для каждого сопоставленного элемента.
-
-
версия добавлена: 1.4.4.fadeToggle( options )
- optionsТип: ОбъектКарта дополнительных параметров, передаваемых методу.
- duration (по умолчанию:
400)Строка или число, определяющие, как долго будет выполняться анимация. - easing (по умолчанию:
swing)Тип: СтрокаСтрока, указывающая, какую функцию плавного изменения использовать для перехода. - queue (по умолчанию:
true)Булево значение, указывающее, следует ли поместить анимацию в очередь эффектов. Если false, анимация начнётся немедленно. Начиная с jQuery 1.7, параметр queue также может принимать строковое значение, в этом случае анимация добавляется в очередь, представленную этой строкой. Когда используется имя пользовательской очереди, анимация не запускается автоматически; необходимо вызвать.dequeue("queuename")для её запуска. - specialEasingТип: ОбъектОбъект, содержащий одну или несколько свойств CSS, определённых параметром properties, и соответствующие функции плавного изменения. (версия добавлена: 1.4)
- stepФункция, вызываемая для каждого анимируемого свойства каждого анимируемого элемента. Эта функция предоставляет возможность изменить объект Tween, чтобы изменить значение свойства перед его установкой.
- progressФункция, вызываемая после каждого шага анимации, только один раз для каждого анимируемого элемента независимо от количества анимируемых свойств. (версия добавлена: 1.8)
- completeТип: Функция()Функция, которая вызывается, когда анимация на элементе завершена.
- startФункция, вызываемая при начале анимации элемента. (версия добавлена: 1.8)
- doneФункция, которая вызывается при завершении анимации элемента (объект Promise разрешён). (версия добавлена: 1.8)
- failФункция, которая вызывается, когда анимация элемента не завершена (объект Promise отклонён). (версия добавлена: 1.8)
- alwaysФункция, которая вызывается, когда анимация элемента завершается или останавливается без завершения (объект Promise либо разрешён, либо отклонён). (версия добавлена: 1.8)
-
-
Метод .fadeToggle() анимирует непрозрачность сопоставленных элементов. При вызове на видимом элементе свойство стиля элемента display устанавливается в none после того, как непрозрачность достигнет 0, поэтому элемент больше не влияет на макет страницы.
Длительности задаются в миллисекундах; большие значения означают медленные анимации, а не быстрые. Строки 'fast' и 'slow' могут быть предоставлены для обозначения длительностей 200 и 600 миллисекунд соответственно.
Плавное изменение
Строка, представляющая функцию плавного изменения, определяет скорость, с которой анимация прогрессирует в разные моменты анимации. Единственными реализациями плавного изменения в библиотеке jQuery являются по умолчанию, которая называется swing, и одна, которая прогрессирует с постоянной скоростью, которая называется linear. Больше функций плавного изменения доступны при использовании плагинов, прежде всего, пакет jQuery UI.
Функция обратного вызова
Если она указана, обратный вызов срабатывает после завершения анимации. Это может быть полезно для объединения разных анимаций в последовательность. Обратный вызов не получает никаких аргументов, но this устанавливается в DOM-элемент, который анимируется. Если несколько элементов анимируются, важно отметить, что обратный вызов выполняется один раз для каждого сопоставленного элемента, а не один раз для всей анимации.
Начиная с jQuery 1.6, метод .promise() может использоваться совместно с методом deferred.done() для выполнения одного обратного вызова для всей анимации, когда все сопоставленные элементы завершили свои анимации (см. пример для .promise()).
Дополнительные примечания:
- Все эффекты jQuery, включая
.fadeToggle(), могут быть отключены глобально, установивjQuery.fx.off = true, что фактически устанавливает продолжительность в 0. Для получения дополнительной информации см. jQuery.fx.off.
Пример:
Сначала скрывает или показывает первый абзац, завершая анимацию в течение 600 миллисекунд с линейным плавным изменением. Последний абзац скрывает или показывает в течение 200 миллисекунд, вставляя сообщение "finished" по завершении.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeToggle demo</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
<script>
$( "button" ).first().on( "click", function() {
$( "p" ).first().fadeToggle( "slow", "linear" );
} );
$( "button" ).last().on( "click", function() {
$( "p" ).last().fadeToggle( "fast", function() {
$( "#log" ).append( "<div>finished</div>" );
} );
} );
</script>
</body>
</html> 
