Своя анимация: animate

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

Первая анимация

<div id="progress" style="width: 0; height: 12px; background: teal"></div>
<button id="start">Запустить</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#start').on('click', function () {
    $('#progress').animate({ width: 300 }, 800);
  });
</script>

Первый аргумент — объект с конечными значениями свойств, второй — длительность. После нажатия полоска за 0,8 секунды вырастает до 300 пикселей.

Несколько свойств и относительные значения

Свойства из одного объекта анимируются одновременно. Строка с += или -= задаёт изменение относительно текущего значения:

<div id="box" style="position: relative; width: 60px; height: 60px; background: coral"></div>
<button id="move">Сдвинуть</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#move').on('click', function () {
    $('#box').animate({ left: '+=50', opacity: 0.5 }, 400);
  });
</script>

Каждое нажатие сдвигает квадрат на 50 пикселей вправо. Чтобы left работал, у элемента должно быть position: relative или absolute.

Плавность

Третьим аргументом можно указать плавность — закон, по которому меняется скорость. В jQuery встроены два варианта: 'swing' (по умолчанию, медленно в начале и в конце) и 'linear' (равномерно). Остальные варианты добавляет библиотека jQuery UI.

// script.js
$('#progress').animate({ width: 300 }, 800, 'linear', function () {
  console.log('Готово');
});

Последним аргументом, как и у эффектов, идёт функция по окончании.

Цепочка анимаций

Вызовы animate() подряд встают в очередь и выполняются друг за другом:

<ul id="tasks">
  <li>Купить хлеб</li>
  <li id="new">Позвонить Олегу</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#new')
    .css({ position: 'relative', fontWeight: 'bold' })
    .animate({ left: 20 }, 200)
    .animate({ left: 0 }, 200);
</script>

Новая задача отъезжает вправо и возвращается — так её можно выделить после добавления.

Что анимировать нельзя

animate() работает только с числами. Цвета (color, backgroundColor) без дополнительного плагина jQuery Color или jQuery UI не анимируются. Для цветов и трансформаций проще использовать CSS-переход:

<style>
  li { transition: background-color 0.4s; }
  li.highlight { background-color: gold; }
</style>
 
<ul><li>Купить хлеб</li></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  setTimeout(() => $('li').addClass('highlight'), 500);
</script>

Через полсекунды jQuery добавляет класс, а плавный переход к жёлтому фону выполняет браузер.

То же на обычном JavaScript

Ближайший аналог — element.animate([{ width: '0px' }, { width: '300px' }], 800) из Web Animations API.

Частая ошибка

Анимировать left или top у элемента без position. jQuery честно меняет значение, но у статичного элемента эти свойства ни на что не влияют: анимация «не работает», а ошибки нет. Сначала задайте position: relative в CSS или через css(), как в примере с цепочкой.

Спасибо, что читаете!