Create Animations with jQuery Animate Guide

jQuery is a great JavaScript library, and contains a very interesting method that we can explore. It is called .animate() and it allows the properties of CSS to perform animations on HTML elements. So, its usage becomes very simple and it allows the developer to create anything from small effects to great animations.

I will walk you through the creation of a simple animation with two balls, simulating one beating the other, so we can learn how this method works.

Let’s start with the HTML code already included in the jQuery library.

Listing 1. HTML code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>Animate jQuery</title>
</head>
 
<body>
 
<div id="box">
    <div id="ball1"></div>
    <div id="ball2"></div>
    <div id="earth"></div>
</div>
 
</body>
</html>

We will need four elements. The #box will serve to “hold” the other three, there we have #ball1 and #ball2 which will be the two balls that we will animate and the #earth div will serve as a base, as if it were the ground for those two.

Listing 2. Placing the CSS

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>Animate jQuery</title>
</head>
 
<style type="text/css">
#box{
    border:1px solid #512B11;
    height:200px;
    left:10px;
    position:relative;
    top:10px;
    overflow:hidden;
    width:600px;
}
 
#earth{
    background:#523723;
    border-top:20px solid #090;
    bottom:0;
    height:50px;
    position:absolute;
    width:600px;
}
 
#ball1, #ball2{
    background:#095fc6;
    border-radius:30px;
    height:50px;
    left:-50px;
    position:absolute;
    top:80px;
    width:50px;
}
#ball2{
    background:#282828;
    left:130px;
}
</style>
 
<body>
 
<div id="box">
    <div id="ball1"></div>
    <div id="ball2"></div>
    <div id="earth"></div>
</div>
 
</body>
</html>

With the implementation of CSS code at the top, we can shape things. We put in #ball1 and #ball2 a border-radius to simulate a ball, and a position: absolute so we can control their position on the screen. In the #earth div there is nothing too much, just a background and a border-top to create a drawing of a surface.

Listing 3. jQuery code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>Animate jQuery</title>
</head>
<script>
$(document).ready(function(){
    $("#ball1").animate({
     "left": "80px"
    }, 300, null, function(){
     $("#ball2").animate({
         "left": "200px"
     }, 400);
     $("#ball1").animate({
         "left": "75px"
     }, 300);
    });
});
</script>
 
<style type="text/css">
#box{
    border:1px solid #512B11;
    height:200px;
    left:10px;
    position:relative;
    top:10px;
    overflow:hidden;
    width:600px;
}
 
#earth{
    background:#523723;
    border-top:20px solid #090;
    bottom:0;
    height:50px;
    position:absolute;
    width:600px;
}
 
#ball1, #ball2{
    border-radius:30px;
    height:50px;
    position:absolute;
    top:80px;
    width:50px;
}
#ball1{
    background:#095fc6;
    left:-50px;
}
#ball2{
    background:#282828;
    left:130px;
}
</style>
 
<body>
 
<div id="box">
    <div id="ball1"></div>
    <div id="ball2"></div>
    <div id="earth"></div>
</div>
 
</body>
</html>

The animation comes in two parts, the second starts exactly when the first one ends.

Before we begin to see how the animations were made, let’s understand how the animate method works.

Listing 4. .animate() method

.animate( properties, duration, easing, complete )

In properties we put the CSS properties that defined the movements of the animation.
In duration we can enter a value in milliseconds, this tells how long it will last.
easing is how the transitions will be performed, I will not delve into it here, but there are libraries that insert other easing options.
In place of the “complete” we can insert any function, which will be executed as soon as the animation finishes.

First, we move the div #ball1 to the right. We do this by changing the value of the left property to 50px, within the animate method. As the initial value, set in CSS, was -50px the animation will perform a move to the right. This animation will last 300 milliseconds and will not have any easing.

Once the first animation is finished, we invoke an anonymous function responsible for the next two animations.

In the second step, we move the other div #ball2 to the right, changing the left property to 200px. In the same way as in the previous step, we also had an initial value for left, which was 130px, increasing this value the element will move to the right. Just below we make the first animated div, #ball1, backtrack a little, simulating a hit, again changing the value of the left property to 75px.

Conclusion

on the official jQuery doc page, you can find much more information, as well as examples of this method. Good luck!

About the Author

Diogo Souza works as a Java Developer at PagSeguro and has worked for companies such as Indra Company, Atlantic Institute and Ebix LA. He is also an Android trainer, speaker at events on Java and mobile world.

How to Use jQuery Animate to Create Animations

Conclusion

About the Author

Diogo Souza

Recommended for you...

Company

Categories