Custom animation: animate

The animate() method smoothly changes any numeric CSS property: width, margins, opacity, font size. All the effects from the previous lessons are built on it.

A first animation

<div id="progress" style="width: 0; height: 12px; background: teal"></div>
<button id="start">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>

The first argument is an object with the final property values, the second is the duration. After the click the bar grows to 300 pixels in 0.8 seconds.

Several properties and relative values

Properties in one object animate at the same time. A string with += or -= sets a change relative to the current value:

<div id="box" style="position: relative; width: 60px; height: 60px; background: coral"></div>
<button id="move">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>

Each click moves the square 50 pixels to the right. For left to work, the element needs position: relative or absolute.

Easing

The third argument can be the easing, the rule by which the speed changes. jQuery has two built in: 'swing' (the default, slow at the start and end) and 'linear' (constant speed). jQuery UI adds more.

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

The last argument, as with effects, is the completion function.

An animation chain

Consecutive animate() calls are queued and run one after another:

<ul id="tasks">
  <li>Buy bread</li>
  <li id="new">Call Oleg</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>

The new task slides to the right and back, a way to highlight it after adding.

What cannot be animated

animate() works only with numbers. Colors (color, backgroundColor) do not animate without the jQuery Color plugin or jQuery UI. For colors and transforms a CSS transition is simpler:

<style>
  li { transition: background-color 0.4s; }
  li.highlight { background-color: gold; }
</style>
 
<ul><li>Buy bread</li></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  setTimeout(() => $('li').addClass('highlight'), 500);
</script>

After half a second jQuery adds the class, and the browser performs the smooth fade to the yellow background.

The same in plain JavaScript

The closest equivalent is element.animate([{ width: '0px' }, { width: '300px' }], 800) from the Web Animations API.

Common mistake

Animating left or top on an element without position. jQuery does change the value, but on a static element these properties have no effect: the animation "does not work", and there is no error. First set position: relative in CSS or with css(), as in the chain example.

Thanks for reading!