.animate()

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

Свойства и значения анимации

Все анимируемые свойства должны быть анимированы до единственного числового значения, за исключением случаев, указанных ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с помощью базовой функциональности jQuery (например, width, height, или left можно анимировать, но background-color — нет, если не используется плагин jQuery.Color). Значения свойств обрабатываются как число пикселей, если не указано иное. Единицы em и % могут быть указаны, где это применимо.

Помимо свойств стиля, некоторые нестилевые свойства, такие как scrollTop и scrollLeft, а также пользовательские свойства, могут быть анимированы.

Сокращенные свойства CSS (например, шрифт, фон, граница) не полностью поддерживаются. Например, если вы хотите анимировать ширину отрисованной границы, предварительно необходимо установить, по крайней мере, стиль границы и ширину границы, отличную от "auto". Или, если вы хотите анимировать размер шрифта, вы должны использовать fontSize или эквивалент в CSS 'font-size' вместо просто 'font'.

В дополнение к числовым значениям каждое свойство может принимать строки 'show', 'hide', и 'toggle'. Эти сокращения позволяют создавать пользовательские анимации скрытия и отображения, которые учитывают тип отображения элемента. Для использования встроенного отслеживания состояния переключения jQuery, ключевое слово 'toggle' должно последовательно задаваться как значение анимируемого свойства.

Анимируемые свойства также могут быть относительными. Если значение задается с префиксом += или -=, то целевое значение вычисляется путем добавления или вычитания заданного числа из текущего значения свойства.

Продолжительность

Продолжительности задаются в миллисекундах; более высокие значения указывают на более медленную анимацию, а не на более быструю. По умолчанию продолжительность составляет 400 миллисекунд. Строки 'fast' и 'slow' можно использовать для обозначения продолжительности 200 и 600 миллисекунд соответственно.

Обратные функции

Если заданы, обратные функции start, step, progress, complete, done, fail, и always вызываются на основе каждого элемента; this устанавливается на анимируемый элемент DOM. Если элементов нет в наборе, обратные функции не вызываются. Если анимируется несколько элементов, обратная функция выполняется один раз для каждого сопоставленного элемента, а не один раз для всей анимации. Используйте метод .promise() для получения промиса, к которому можно присоединить обратные функции, которые срабатывают один раз для набора анимированных элементов любого размера, включая ноль элементов.

Основное использование

Для анимации любого элемента, например, простого изображения:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;">

Для одновременной анимации прозрачности, левого смещения и высоты изображения:

$( "#clickme" ).on( "click", function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

Обратите внимание, что целевое значение свойства height равно 'toggle'. Поскольку изображение было видимым до этого, анимация уменьшает высоту до 0, чтобы скрыть его. Второй щелчок затем обращает этот переход:

Значение opacity изображения уже соответствует целевому значению, поэтому это свойство не анимируется при втором щелчке. Поскольку целевое значение для left является относительным значением, изображение смещается еще дальше вправо во время этой второй анимации.

Направляющие свойства (top, right, bottom, left) не оказывают заметного эффекта на элементы, если их свойство стиля position равно static, что по умолчанию верно.

Функция шага

Вторая версия .animate() предоставляет опцию step — функцию обратного вызова, которая срабатывает на каждом шаге анимации. Эта функция полезна для включения пользовательских типов анимации или изменения анимации по мере ее выполнения. Она принимает два аргумента (now и fx), и this устанавливается на анимируемый элемент DOM.

• now: числовое значение анимируемого свойства на каждом шаге
• fx: ссылка на прототип объекта jQuery.fx, который содержит ряд свойств, таких как elem для анимируемого элемента, start и end для начального и конечного значений анимируемого свойства соответственно, и prop для анимируемого свойства.

Обратите внимание, что функция step вызывается для каждого анимируемого свойства на каждом анимируемом элементе. Например, для двух элементов списка функция step срабатывает четыре раза на каждом шаге анимации:

$( "li" ).animate({
  opacity: .5,
  height: "50%"
}, {
  step: function( now, fx ) {
    var data = fx.elem.id + " " + fx.prop + ": " + now;
    $( "body" ).append( "<div>" + data + "</div>" );
  }
});

Ускорение

Остальным параметром .animate() является строка, называющая функцию ускорения, которую нужно использовать. Функция ускорения задает скорость, с которой анимация продвигается в разные моменты анимации. В библиотеке jQuery реализованы только две функции ускорения: по умолчанию, называемая swing, и функция с постоянной скоростью, называемая linear. Больше функций ускорения доступны с использованием плагинов, в частности, пакета jQuery UI.

Ускорение по каждому свойству

Начиная с версии jQuery 1.4, вы можете задавать функции ускорения по каждому свойству в одном вызове .animate(). В первой версии .animate(), каждое свойство может принимать массив в качестве значения: первый элемент массива — свойство CSS, а второй — функция ускорения. Если функция ускорения по каждому свойству не определена для конкретного свойства, она использует значение необязательного аргумента ускорения метода .animate(). Если аргумент ускорения не определен, используется функция ускорения по умолчанию swing.

Например, для одновременной анимации ширины и высоты с функцией ускорения swing и анимации прозрачности с функцией ускорения linear.

$( "#clickme" ).on( "click", function() {
  $( "#book" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
  });
});

Во второй версии .animate(), объект опций может включать свойство specialEasing, которое само по себе является объектом свойств CSS и соответствующих функций ускорения. Например, для одновременной анимации ширины с использованием функции ускорения linear и анимации высоты с использованием функции ускорения easeOutBounce.

$( "#clickme" ).on( "click", function() {
  $( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});

Как уже отмечалось, для функции easeOutBounce требуется плагин.

• Все эффекты jQuery, включая .animate(), могут быть отключены глобально путём установки jQuery.fx.off = true, что эффективно устанавливает продолжительность в 0. Для получения дополнительной информации, см. jQuery.fx.off.