.animate()

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

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

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

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

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

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

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

Длительность

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

Функции обратного вызова

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