# Метод animate

Метод `animate` позволяет создавать анимационные эффекты для различных CSS-свойств. Единственный обязательный параметр - объект с CSS-свойствами, подобный тому, что мы передаем в метод `css`. Многие свойства, имеющие нечисловые значения или несколько значений не могут быть анимированы базовым функционалом jQuery (например `background-color`). Также не всегда поддерживаются сокращенные названия CSS-свойств, например `font` - вместо этого нужно использовать `fontSize` или `font-size`. Перед значениями можно поставить `'+='` или `'-='`, в таком случае значение указанное далее будет прибавлено или вычтено из текущего значения свойства. Также вместо числовых значений можно поставить `show`, `hide` или `toggle`. Все jQuery эффекты, включая `animate`, можно отключить глобально, используя настройку `jQuery.fx.off` = `true`, которая устанавливает значение длительности в 0.

## Синтаксис

Первым параметром анимации передается объект с CSS-свойствами и их значениями в формате ключ: значение, которые мы собираемся анимировать. Остальные параметры считаются необязательными. Второй параметр - определяет длительность анимации в миллисекундах, `400мс` по умолчанию. Третьим параметром функцию плавности для перехода (по умолчанию это `swing`), а также четвертым - callback-функция, которая запустится после выполнения анимации:

`.animate(свойства, [длительность ], [функция плавности ], [callback-функция ]);`

Время можно задавать не только в миллисекундах, но и ключевыми словами `slow` (`600мс`) и `fast` (`200мс`), чем больше значение, тем медленней анимация. Можно вторым параметром передать методу различные опции, в виде объекта JavaScript, содержащего пары ключ: значение:

`.animate(свойства, options);`

Например, установим для CSS-свойств `width` и `height` значение `toggle`. Длительность на `5000мс`, функции плавности передадим в виде объекта, для ширины это будет линейная функция, а для высоты - `easeOutBounce`, также по завершению анимации у нас один раз выполнится функция (см. ключ ⁅с⁆complete⁅/с⁆), которая после элемента с `#test` разместит див с надписью `'Animation complete.'`:

`$('#test').animate({ width: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, complete: function() { $(this).after('<div>Animation complete.</div>'); } });`

Ниже в таблице приведены свойства и методы объекта `options` и их описание:

Название | Описание
--- | ---
`duration` | Длительность анимации в миллисекундах - строка или число. `400мс` по умолчанию.
`easing` | Определяет какую функцию плавности использовать. `swing` по умолчанию.
`queue` | Булево значение или строка. `true` по умолчанию. Указывает - поставить ли анимацию в очередь. При значении `false` анимация начнется незамедлительно. Если параметр передать строкой, то анимация будет поставлена в очередь, представленной этим параметром. При использовании очереди с пользовательским названием, анимация не запустится автоматически, чтобы ее запустить - используйте ⁅с⁆dequeue('queuename')⁅/с⁆.
`specialEasing` | Здесь вы можете передать объект, в котором ключами будут CSS-свойства, а значениями - соответствующие им функции плавности.
`step` | Функция, которая вызывается для каждого анимированного свойства каждого анимированного элемента. Она позволяет модифицировать `Tween` объект, чтобы изменить значение свойства до того, как оно устанавливается. В качестве параметров принимает текущее значение `tween` и `Tween` объект.
`progress` | Функция, вызываемая после каждого шага анимации, только по одному разу на каждый элемент независимо от числа анимированных свойств. Функция принимает три параметра `animation` (в виде промиса), `progress` (число от `0` до `1`) и `remainingMs` (число оставшихся миллисекунд).
`complete` | Функция, вызываемая один раз после окончания анимации элемента. Функция принимает `animation` (в виде промиса).
`start` | Функция, которая вызывается, когда анимация элемента начинается. Функция принимает `animation` (в виде промиса) и `jumpedToEnd` (Булево значение. Если `true`, то анимация автоматически завершается).
`done` | Функция, которая вызывается, когда анимация элемента заканчивается (ее промис выполнен успешно). Функция принимает `animation` (в виде промиса) и `jumpedToEnd` (Булево значение. Если `true`, то анимация автоматически завершается).
`fail` | Функция, которая вызывается, когда анимация элемента заканчивается с ошибкой (ее промис выполнен с ошибкой). Функция принимает `animation` (в виде промиса) и `jumpedToEnd` (Булево значение. Если `true`, то анимация автоматически завершается).
`always` | Функция, которая вызывается, когда анимация элемента завершается или останавливается без завершения (ее промис выполнен успешно или с ошибкой). Функция принимает `animation` (в виде промиса) и `jumpedToEnd` (Булево значение. Если `true`, то анимация автоматически завершается).

## Пример

Давайте при нажатии на кнопку `#left`, будем сдвигать зеленый квадрат влево, а на кнопку `#right` вправо на `50px`, также установим длительность на `600мс` - командой `slow`:

`<button id="left">left</button> <button id="right">right</button> <div class="block"></div>` `div { position: absolute; background-color: green; left: 50px; width: 100px; height: 100px; margin: 5px; }` `$('#right').click(function() { $('.block').animate({'left': '+=50px'}, 'slow'); }); $('#left').click(function() { $('.block').animate({'left': '-=50px'}, 'slow'); });`

## Смотрите также

- метод `show`,
  который плавно показывает элементы
- метод `stop`,
  который позволяет остановить запущенную анимацию
- метод `delay`,
  который устанавливает задержку выполнения событий
- свойство `jQuery.fx.off`,
  которое позволяет глобально отключить анимацию
- селектор `animated`,
  который выбирает элементы, которые в данный момент задействованы в анимации

← →
↑