Метод .animate() в jQuery: анимация изображений, текста и чего угодно


Метод .animate() позволяет создавать анимационные эффекты с использованием css-свойств самих объектов. Метод имеет две вариации с различным количеством передаваемых параметров:

1

.animate( properties [, duration ] [, easing ] [, complete ] )

где:

  • properties — css свойство, над которым будет производиться трансформация
  • duration — продолжительность процесса трансформации (по умолчанию 400)
  • easing — используемая функция для анимации
  • complete — callback-функция, которая будет вызвана по окончанию анимации
1

.animate( properties, options )

Эта вариация вызова может быть использована, если вам необходимо передать больше различных параметров.

  • properties — css свойство, над которым будет производиться трансформация
  • options — набор опций

Возможные опции:

  • duration — продолжительность процесса трансформации (по умолчанию 400)
  • easing — используемая функция для анимации (по умолчанию «swing»)
  • complete — callback-функция, которая будет вызвана по окончанию анимации
  • queue — булево значение, которое сигнализирует о том, нужно ли помещать данную анимацию в очередь или нет. Если false, то анимация будет выполнена сразу же (по умолчанию true)
  • specialEasing — объект, содержащий несколько свойств и соответствующие им easy-функции для выполнения
  • step — функция, которая может быть вызвана для каждого анимируемого свойства и которая позволяет изменить значение данного свойства перед анимацией
  • progress — функция, которая вызывается после каждого шага анимации, но только один раз для конкретного анимируемого свойства
  • start — функция, вызываемая после старта анимации
  • done — функция, вызываемая после окончания анимации
  • fail — функция, вызываемая, если невозможно завершить анимацию по каким-то причинам
  • always — функция, вызываемая, если анимация завершилась или остановлена без завершения

Метод .animate() позволяет создавать анимацию для любого числового свойства css. Например, такие свойства, как width, height, и left могут быть анимированы, а background-color — нет, поскольку ее значение не является строго числовым (в десятичной системе).

В дополнении к стилевым свойствам, таким не css-свойства, как scrollTop и scrollLeft также могут быть анимированы.

Числовые значения для анимации также могут заменяться на строковые константы: ‘show’, ‘hide’, и ‘toggle’. Их задача, в общем-то, понятна.

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

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

Продолжительность анимации задается в миллисекундах. Чем больше значение, тем дольше выполняется анимация. Если продолжительность не указывается, то используется значение по умолчанию 400. Также могут быть использованы строковые константы ‘fast’ и ‘slow’, которые имеют значение 200 и 600 соответственно.

Пример использования

Допустим, у нас есть какое-то изображение:

1

  <img id="test" src="test.png" width="300" height="200" style="position: relative; left: 20px;">

Теперь мы хотим при клике по картинке изменить (создать анимацию) для трех свойств: прозрачность, сдвиг по горизонтали влево и высоту. Это можно сделать с помощью следующего кода:

1
2
3
4
5
6
7
8
9

$( "#test" ).click(function() {
  $( "#test" ).animate({
    opacity: 0.40,
    left: "+=30",
    height: 100
  }, 6000, function() {
    // анимация закончена
  });
});
Другие посты

Категория: jQuery

Оставить комментарий


Яндекс.Метрика