Метод 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,
    который выбирает элементы, которые в данный момент задействованы в анимации