3.11.4. jQuery анимация

jquery-animationБиблиотека jQuery содержит несколько кросс-браузерных методов для анимации элементов, например, скольжение и плавное исчезновение, без привлечения дополнительных библиотек или плагинов. Для расширения возможностей работы с анимацией воспользуйтесь библиотекой jQuery UI (http://jqueryui.com), которая содержит набор интерфейсных взаимодействий, эффекты, виджеты и темы.

CSS-стили придают элементам страницы визуальные свойства, которые описывают их внешний вид. jQuery анимация представляет собой интерактивный процесс изменения свойств html-элементов от одного значения к другому.

Создание анимации элементов с помощью jQuery

1. Создание собственных эффектов с помощью метода .animate()

Эффекты, которых нет в библиотеке jQuery, можно создавать с помощью метода .animate(). Интерпретатор браузера динамически, без перезагрузки страницы, изменяет выбранные свойства на указанные значения. Анимация происходит для всех элементов обернутого набора. Чтобы добавить эффекты для конкретного элемента, нужно воспользоваться фильтрами jQuery для отбора.

Метод позволяет анимировать любое css-свойство, имеющее числовое значение, например, font-size, opacity, border-width, margin, padding, height, width, background-position и т.д. При этом имена свойств должны быть указаны слитно — fontSize, paddingLeft, или должен использоваться css-эквивалент свойства — "font-size". Числовые значения свойств не заключаются в кавычки.

Для любого свойства предварительно должно быть установлено начальное значение, а в css-объявлении должна использоваться полная запись каждого свойства, т.е., вместо свойства border должно быть заданы значения для border-style, border-width и т.д.

Функция обратного вызова вызывается один раз после завершения анимации. Функции не передается никаких аргументов, но анимации выполняется для элемента, переданного свойству this в качестве контекста.

Значениями свойств могут также выступать hide, show или toggle, в результате чего к элементу применится вычисляемой значение — отображение, скрытие или переключение исходных состояний свойств.

Метод .animate()позволяет изменять css-свойства выбранных элементов с возможностью одновременной анимации нескольких свойств, задавая продолжительность анимации в миллисекундах.

Данная анимация одновременно применяется к свойству left, для которого задано значение 200px, и к свойству top со значением 200px, продолжительность анимации задана 500ms.

Для элемента можно задавать относительное перемещение при каждом вызове анимации с помощью операторов +=, -=, *=, /=, например, $("div").animate({left: "+=200", top: "-=200"}, 500);.

Метод .animate() имеет две формы записи. В первой методу передаются четыре аргумента:

.animate({свойство1: «значение1», свойство2: «значение2»}, продолжительность, функция перехода, function() {…});
{свойство1: «значение1»} — объект свойств, которые собираемся анимировать в формате свойство: «значение», перечисленные в фигурных скобках через запятую.
продолжительность — необязательный параметр продолжительности анимации, задающий время в миллисекундах или с помощью ключевых слов slow, fast, normal.
функция перехода — необязательное имя функции перехода.
function() {…} — необязательная функция обратного вызова.

Вторая форма принимает два аргумента: объект свойств и объект дополнительных функциональных возможностей.

.animate({свойство1: «значение1″, свойство2: значение2»}, {duration: «значение», easing: «значение», specialEasing: {
свойство1: «easing1», свойство2: «easing2»}, complete: function() {…}, queue: true, step: callback});
{свойство1: «значение1»} — объект свойств, которые собираемся анимировать в формате свойство: «значение», перечисленные в фигурных скобках через запятую.
duration — число или ключевое слово, значение по умолчанию 400. Устанавливает продолжительность анимации.
easing — имя функции перехода. Значение по умолчанию swing — колебательный переход, второе доступное значение — linear — линейный переход. Расширенные возможности реализуются с помощью плагинов, смотрите jQuery UI.
queue — помещает анимацию в очередь эффектов, по умолчанию true, значение false — немедленно воспроизводит анимацию.
specialEasing — объект, содержащий одно и более свойств и их значений, описывающих функции перехода.
step — функция, которая будет вызываться по окончании каждого этапа анимации и будет применяться для каждого элемента обернутого набора. Функции передается порядковый номер этапа и внутренний объект, описывающий эффект.
progress — функция, которая будет вызываться после каждого шага анимации, только один раз за анимацию независимо от количества анимационных свойств.
complete — функция, которая должна быть вызвана по окончании воспроизведения анимации.
start — функция, которая будет вызвана в начале анимации.
done — функция, вызванная по завершении анимации.
fail — функция, вызываемая в случае невозможности завершения анимации.
always — функция, которая будет вызвана в случае остановки или неполного завершения анимации.

2. Анимационные эффекты jQuery

2.1. Метод .fadeIn()

Управляет прозрачностью, показывая скрытый элемент, при этом свойство opacity выбранного элемента изменяется от 0 до 1. Для этого на странице появляется необходимое пространство для элемента, при этом остальные элементы могут сдвинуться с места.

.fadeIn(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта с помощью ключевых слов "fast", "normal", "slow" или числовых значений. По умолчанию используется значение "normal", равное 400 миллисекундам.
функция по завершении анимации — необязательный параметр, задает функцию, которая будет вызвана после проявления элемента.
.fadeIn(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение»
.fadeIn(длительность, функция перехода, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода. Значение по умолчанию swing — колебательный переход, второе доступное значение — linear — линейный переход.
функция по завершении анимации — необязательный параметр, задает функцию, которая будет вызвана после проявления элемента.

2.2. Метод .fadeOut()

Заставляет элемент исчезнуть, сделав его прозрачным, сохраняя на странице место, занимаемое элементом. Свойство opacity выбранного элемента изменяется от 1 до 0.

.fadeOut(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта с помощью ключевых слов "fast", "normal", "slow" или числовых значений. Значение по умолчанию — 400 миллисекунд.
функция по завершении анимации — необязательный параметр, задает функцию, которая будет вызвана после проявления элемента.
.fadeOut(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.fadeOut(длительность, функция перехода, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, задает функцию, которая будет вызвана после проявления элемента.

2.3. Метод .fadeTo()

Позволяет изменить степень прозрачности до заданного значения, например, $("element").fadeTo("normal",.50);.

.fadeTo(длительность, прозрачность, функция по завершении анимации)
длительность — задает скорость проявления эффекта.
прозрачность — число от 0 до 1, задающее прозрачность элемента.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.fadeTo(длительность, прозрачность, функция перехода, функция по завершении анимации)
длительность — задает скорость проявления эффекта.
прозрачность — число от 0 до 1, задающее прозрачность элемента.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.

2.4. Метод .fadeToggle()

Если элемент скрыт, то он появляется на экране, если виден, то исчезает.

.fadeToggle(длительность, функция перехода, функция по завершении анимации)
длительность — задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.fadeToggle(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».

2.5. Метод .hide()

Скрывает видимый элемент. При установлении скорости элемент исчезает, как бы сужаясь. Чтобы замедлить действие, нужно передать значение продолжительности.

.hide()
Метод указывается без параметров.
.hide(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.hide(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.hide(длительность, функция перехода, функция по завершении анимации)
длительность — задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.

2.6. Метод .show()

Показывает ранее скрытый элемент. Если не задано значение скорости, то элемент появляется моментально, если скорость задана, то элемент появляется от верхнего левого к нижнему левому углу.

.show()
Метод указывается без параметров.
.show(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.show(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.show(длительность, функция перехода, функция по завершении анимации)
длительность — задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.

2.7. Метод .toggle()

Одиночный метод, переключает выбранный элемент из одного состояния в другое, в зависимости от его текущего состояния, скрывая или отображая его.

.toggle(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.toggle(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.toggle(длительность, функция перехода, функция по завершении анимации)
длительность — задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.toggle(display)
display — если параметр display установлен, то элемент будет показан.

2.8. Метод .slideDown()

Заставляет скрытый элемент появиться на веб-странице. Элемент проявляется постепенно — сначала его верхняя часть, и по мере проявления остальной части то, что находилось под элементом, сдвигается вниз. Поэтому для того, чтобы контент не перемещался по странице, можно использовать абсолютное позиционирование элемента {position:absolute;}. Если необходимо разместить данный элемент относительно другого, то задайте относительное позиционирование {position:relative;} для элемента, который окружает абсолютно позиционированный элемент.

.slideDown(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.slideDown(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.slideDown(длительность, функция перехода, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.

2.9. Метод .slideUp()

Изменяет свойство height элемента, пока она не станет равной 0, после скрывает элемент display: none;. При этом удаление начинается снизу, и если для элемента не задано позиционирование, то контент, находившийся ниже, перемещается вверх.

.slideUp(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.slideUp(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.slideUp(длительность, функция перехода, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.

2.10. Метод .slideToggle()

Скрывает видимый элемент и показывает скрытый, т.е. может использоваться в качестве переключателя, позволяющего как отображать, так и скрывать элемент. При этом элемент проявляется постепенно, сверху вниз.

.slideToggle(длительность, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.
.slideToggle(объект свойств)
объект свойств — представляет собой пары дополнительных опций, указанных в формате свойство: «значение».
.slideToggle(длительность, функция перехода, функция по завершении анимации)
длительность — необязательный параметр, задает скорость проявления эффекта.
функция перехода — необязательный параметр, задает функцию перехода.
функция по завершении анимации — необязательный параметр, описывает функцию, которая будет вызвана после проявления элемента.

3. Управление очередью анимации

Анимация элемента реализуется только с помощью методов, создающих анимационные эффекты. Если анимация реализована цепочкой методов, каждый эффект выполняется последовательно, друг за другом. Например, $("div").slideDown().fadeOut(); сначала начнется скольжение блока вниз, а выцветание поставится в очередь "fx" и будет вызвано только при завершении скольжения.

Чтобы добавить пользовательские эффекты, создаются функции, которые также добавляются в очередь "fx". Очередь представляет массив функций, существующих на уровне элемента и хранящихся в jQuery.data. Каждый элемент может иметь одну или несколько очередей функции, но обычно используется только одна очередь по умолчанию "fx".

Функции включаются в очередь с помощью метода .queue(), без него функции выполняться не будут. Каждая функция по своему завершению должна вызвать метод .dequeue(), чтобы передать управление следующей функции в очереди.

3.1. Метод .queue()

Метод показывает текущую очередь анимации или манипулирует очередью функций, создающих анимационные эффекты, для элемента/элементов набора.

.queue(имяОчереди)
имяОчереди — строка, содержащая имя очереди. По умолчанию текущая очередь имеет зарезервированное имя "fx". Возвращает массив функций, находящихся в очереди.
.queue(имяОчереди, функция)
имяОчереди — строка, содержащая имя очереди.

функция — функция обратного вызова, которая добавляется в конец очереди с именемОчереди для всех элементов обернутого набора.
.queue(имяОчереди, имяНовойОчереди)
имяОчереди — строка, содержащая имя очереди.

имяНовойОчереди — заменяет текущую очередь всех элементов набора на новуюОчередь, состоящую из массива функций.

3.2. Метод .dequeue()

Ставит следующую анимацию в очередь. Это означает, что если выполняется анимация, когда этот метод вызывается, то новый анимация будет начата сразу после того, как текущая закончит свое выполнение. Выполняет первую функцию очереди для всех элементов набора, после выполнения функция удаляется из очереди. Обработчики события будут выполнять и удалять из очереди поочередно последующие функции. Если метод вызывается внутри функции, добавляемой в очередь, это вызовет поочередное исполнение всех функций, входящих в очередь.

.dequeue(имяОчереди)
имяОчереди — строка, содержащая имя очереди.

3.3. Метод .clearQueue()

Удаляет все функции анимации из очереди, не только текущую, но и все последующие, без их выполнения. Может использоваться для удаления любых очередей.

.clearQueue(имяОчереди)
имяОчереди — строка, содержащая имя очереди.

3.4. Метод .delay()

Позволяет установить отсрочку для запуска эффектов, ожидая определенное количество миллисекунд, прежде чем запустить следующий эффект в очереди.

.delay(число или строка, имяОчереди)
число или строка — устанавливает продолжительность задержки в миллисекундах или с помощью ключевых слов — fast (эквивалентно 200ms) и slow (эквивалентно 600ms).
имяОчереди — необязательный параметр, указывает на очередь, для которой устанавливается задержка, по умолчанию — это очередь "fx".

3.5. Метод .stop()

Останавливает текущую анимацию в очереди сразу после его запуска для элементов набора. Если при вызове метода передаются некоторые аргументы, то вы также можете очистить очередь и определить, должны ли элементы при остановке анимации остаться на месте, или они должны вернуться к первоначальному состоянию. По умолчанию оба параметра имеют значение false.

.stop(логическое значение1, логическое значение2)
логическое значение1 — значение true останавливает все анимационные эффекты, находящиеся в очереди.
логическое значение2 — значение true останавливает все эффекты, кроме текущего.

3.6. Метод .finish()

Останавливает текущую анимацию, удаляет все очереди анимации и завершает все анимации для соответствующих элементов.

.finish(имяОчереди)
имяОчереди — задает имя очереди анимации, которую нужно остановить. По умолчанию — очередь "fx".

4. Управление анимацией через свойства объекта jQuery

4.1. Свойство jQuery.fx.interval

Позволяет изменить скорость выполнения анимации. В качестве значения указывается количество миллисекунд. Значение по умолчанию 13ms. Уменьшая скорость, можно добиться более плавного выполнения эффектов.
jQuery.fx.interval = 500;

4.2. Свойство jQuery.fx.off

Используется для того, чтобы глобально отключить или включить анимацию. Значение по умолчанию false, что соответствует выполнению анимации. Если задано значение true, то все методы анимации будут отключены, а элементы вернутся к своему первоначальному состоянию.

  • Евгений Дерменжи

    как метод .animate применить к элементу массива?

    • Никак. Для работы с массивами существуют определённые методы и свойства. Метод animate() к ним не относится. А почему возникла именно такая потребность?