jQuery эффекты
Эффекты jQuery — это средства для изменения видимости и анимации элементов страницы. Методы этого раздела позволяют показывать и скрывать элементы, плавно менять их оформление, а также управлять очередью и длительностью анимаций.
Для плавного перехода задают длительность, например .fadeOut(200). Без длительности .show(),
.hide() и .toggle() сразу меняют видимость.
.animate()
изменяет поддерживаемые числовые CSS-значения.
Анимации обычно выполняются последовательно в очереди fx каждого элемента.
.stop()
останавливает текущую анимацию;
.finish()
доводит текущие и ожидающие анимации выбранной очереди до конца.
.clearQueue()
очищает ожидающие шаги и сама не завершает текущий.
Примеры рассчитаны на полную jQuery 4.0.0. В slim нет анимаций и очередей; мгновенные .show(),
.hide() и .toggle() остаются. Обычные переходы оформления также можно задавать средствами
CSS. Исторический $.fx.interval удалён в 4.0.
| Метод | Описание |
|---|---|
| .animate() | Выполняет пользовательскую анимацию основанную на изменении CSS свойств для выбранных элементов. |
| .clearQueue() | Удаляет ожидающие функции из указанной очереди. Уже выполняемая функция или анимация продолжает работу. |
| .delay() | Устанавливает таймер для задержки выполнения последующих функций, которые следуют за ним в очереди. |
| .dequeue() | Начинает выполнение следующей функции в очереди для выбранных элементов. |
| .fadeIn() | Позволяет плавно изменить прозрачность для отдельных элементов (из скрытого состояния в видимое). |
| .fadeOut() | Позволяет плавно изменить прозрачность для отдельных элементов (из видимого состояния в скрытое). |
| .fadeTo() | Позволяет изменить уровень прозрачности у выбранных элементов. |
| .fadeToggle() | Позволяет плавно изменить прозрачность для отдельных элементов (в зависимости от состояния элемента: из видимого в скрытое, либо из скрытого в видимое). |
| .finish() | Завершает текущие и ожидающие анимации в указанной очереди выбранных элементов, устанавливая их конечные значения. |
| .hide() | Скрывает выбранные элементы. |
| $.fx.off |
При значении true задаёт нулевую длительность запускаемых анимаций, чтобы они сразу достигали
конечных значений.
|
| .queue() |
Читает очередь первого элемента или изменяет очередь каждого элемента коллекции. По умолчанию используется
fx; пользовательскую очередь нужно запускать явно.
|
| .show() | Отображает скрытые выбранные элементы. |
| .slideDown() | Плавно отображает выбранные элементы скользящим движением (постепенно увеличивая их высоту). |
| .slideToggle() | Плавно отображает, или скрывает выбранные элементы скользящим движением (постепенно увеличивая, или уменьшая их высоту). |
| .slideUp() | Плавно скрывает выбранные элементы скользящим движением (постепенно уменьшая высоту). |
| .stop() | Позволяет остановить выполняемую анимацию у выбранных элементов. |
| .toggle() | Отображает или скрывает выбранные элементы. |
$.queue(), $.dequeue()
|
Читает и изменяет очередь отдельного DOM-элемента; $.dequeue() запускает следующий шаг. |
Настройки анимации и исторический таймер
| API | Описание |
|---|---|
$.fx.interval
Устарело
|
Интервал резервного таймера анимаций в миллисекундах (по умолчанию 13). Устарел с jQuery 3.0: при
использовании requestAnimationFrame не управляет частотой кадров. Удалён в jQuery 4.0.
Документация.
|
$.speed()
|
Нормализует длительность, функцию сглаживания и обработчик завершения в объект параметров для пользовательских анимаций. Документация. |