A Brief Introduction to jQuery animate()

The jQuery animate() method performs custom animations on specified CSS properties. It accepts a number of arguments. The first argument is an object containing the CSS changes to be made. The second argument is able to handle multiple options such as duration and a callback function. 

There is a large number of options available to animate(). This introduction will be limited to a beginning primer. We will look at the syntax for jQuery animate as well as example code. Our example code will show how to expand a <div> using animate(). 

Why Use jQuery animate()?

There are many use cases for jQuery animate(). To put it simply, you can use this method any time your application needs an animation on the front end. This method provides a dynamic and complex solution. 

Animation has become standard practice in front end development. With enough practice using animate(), you’ll be implementing animation to your project’s front end in no time. Let’s get started by learning some syntax. 

jQuery animate() Syntax

As we have briefly discussed, animate() takes an argument of a CSS object. This is an object containing the new values of selected CSS properties. A best practice is to only use animate() on an element that is referenced in the stylesheet. 

Like all jQuery methods, animate() must be attached to a selected element. From there, call animate() and pass in an object of CSS properties with values of the desired final look. It is important to mention here that animate() only works with numerical properties of CSS. Attributes such as colors or font type will not be read by animate().

jQuery animate() in Action

Let’s break down the above explanation into code to make it more clear, starting with a basic HTML rendering of a button and a <div>.

HTML
<button id="click">Click Me</button>
<div id="block">Watch Me!</div>

Both elements have id attributes. This is what we will use to select them with jQuery. Now let’s look at how we could style the <div> so we can use animate().

CSS
 div {
    background-color: lightblue;
    width: 100px;
    border: 1px solid blue;
  }

Here, we have styled the <div> with a background color, width, and a small border. When we use jQuery to select our <div>, we can pass animate() an object of CSS attributes. These attributes will reflect the final changes we want to see. 

$('#click').click(function() {
  $('#block').animate({
  width: '70%',
  fontSize: '3em',
  borderWidth: '10px'
  })
})

If we break down the jQuery, we see that we have selected the button by the id attribute of click. Then we call the jQuery click() method to attach an event handler that waits to receive a click. Once click() receives the click event, it will execute the callback function. 

To refresh your memory, a callback function is a function passed to another function that will be executed later. In this case, it’s after a click event is detected. Read more about jQuery click() here. 

Moving on to inside the callback function, we select our <div>. Just like our button, we are using the id attribute of block to select it. Now we call animate() on the <div> and pass to it our CSS object. 

Notice how fontSize and borderWidth differ from the CSS way of declaring them. This is how jQuery accepts CSS properties that are usually hyphenated. 

The values in our CSS object are what we want to render once the animation is complete. Now, when we click the button, we will see the <div> animate: 

It worked! We see the contents of the <div> all expanding together until reaching the new CSS values. 

Conclusion

In this beginner’s primer to jQuery animate(), we learned that animate() performs animation on a CSS object. That CSS object is passed to the method with the final display values. It bears repeating that only numerical CSS values will be read by animate(). Properties such as background color and font type will not be read.

There is a lot more ground to cover with jQuery animate(), so when this introduction makes sense, click here. It’s always good practice to read over the official documentation and practice with the examples included. jQuery animate() can seem quite complex at first, but with regular practice, you will master animations sooner than you think!