Метод .animate()

Метод .animate() предназначен для создания кастомной анимации CSS-свойств элементов. Он позволяет изменять числовые свойства элементов плавно с заданной скоростью, используя удобный синтаксис и гибкие параметры. В отличие от методов .fadeIn(), .slideUp() и других готовых эффектов, .animate() предоставляет полный контроль над анимацией.

Синтаксис

$(селектор).animate(стиль, скорость, функция_окончания);

Параметры:

  • стиль — объект, где ключи — CSS-свойства с числовыми значениями, а значения — целевые значения этих свойств.
  • скорость — длительность анимации в миллисекундах или ключевые слова "slow", "fast".
  • функция_окончания — callback, который выполняется после завершения анимации.

Пример:

$("#box").animate({
    width: "300px",
    height: "200px",
    opacity: 0.5
}, 1000, function() {
    console.log("Анимация завершена");
});

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

  1. Только числовые свойства Метод .animate() работает только с теми CSS-свойствами, которые могут принимать числовые значения. Это такие свойства, как width, height, margin, padding, opacity и fontSize. Свойства вроде color или background-color напрямую не поддерживаются. Для них необходимо использовать дополнительные плагины или jQuery UI.

  2. Сокращенные формы Можно задавать относительные изменения с помощью "+=" или "-=":

$("#box").animate({
    width: "+=50px",
    height: "-=20px"
}, 500);

Это увеличит ширину на 50px и уменьшит высоту на 20px относительно текущих значений.

  1. Цепочка анимаций jQuery поддерживает последовательное выполнение нескольких анимаций через цепочку:
$("#box")
    .animate({ width: "200px" }, 500)
    .animate({ height: "150px" }, 500)
    .animate({ opacity: 0.8 }, 500);

Каждая последующая анимация автоматически выполняется после завершения предыдущей.

Настройка скорости и эффектов

Скорость анимации может быть указана числом (миллисекунды) или ключевыми словами:

  • "slow" — примерно 600 мс
  • "fast" — примерно 200 мс
  • Число — точная длительность в миллисекундах

Также можно указать easing — способ изменения скорости в процессе анимации. По умолчанию используется "swing" (ускорение к середине и замедление к концу), альтернативный вариант — "linear" (равномерная скорость).

Пример с easing:

$("#box").animate({
    left: "300px"
}, 1000, "linear");

Колбек функции

Callback-функция позволяет выполнять действия после завершения анимации:

$("#box").animate({
    opacity: 0
}, 800, function() {
    $(this).hide();
});

В этом примере после уменьшения прозрачности до 0 элемент скрывается через hide().

Параллельные анимации

Несколько свойств в одном .animate() выполняются одновременно, а не последовательно. Для последовательного эффекта нужно создавать отдельные вызовы .animate() или использовать очередь:

$("#box").animate({ width: "200px" }, 500)
         .animate({ height: "150px" }, 500);

Очередь анимаций (queue)

jQuery использует очередь по умолчанию для всех анимаций. Можно управлять этим с помощью опции queue:

$("#box").animate({ left: "200px" }, { duration: 1000, queue: false });

Если queue: false, анимация выполняется одновременно с другими текущими анимациями.

Стоп анимации

Метод .stop() позволяет прервать текущие анимации:

$("#box").stop(true, true);

Параметры:

  • Первый true — удалить все оставшиеся анимации из очереди.
  • Второй true — сразу завершить текущую анимацию и применить конечное состояние.

Примеры практических эффектов

1. Плавное изменение размера и прозрачности:

$("#box").animate({
    width: "400px",
    height: "300px",
    opacity: 0.7
}, 1200, "swing");

2. Перемещение элемента по оси X:

$("#box").animate({ left: "500px" }, 800, "linear");

3. Комбинация анимаций с задержкой:

$("#box")
    .animate({ width: "200px" }, 500)
    .delay(300)
    .animate({ height: "100px" }, 500);

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

Оглавление