• facebook
  • twitter
  • in
  • Email

WEBINAR:
On-Demand

Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame


Watch

jQuery is a great codecademy.com library, and contains a very interesting method that we can explore. It is called .animate() and it allows the properties of codecademy.com to perform animations on w3schools.com 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 javascriptkit.com 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 eloquentjavascript.net

<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;
    
}
 
#earth{
    background:#523723;
    border-top:20px solid #090;
    bottom:0;
    height:50px;
    position:absolute;
    
}
 
#ball1, #ball2{
    background:#095fc6;
    border-radius:30px;
    height:50px;
    left:-50px;
    position:absolute;
    top:80px;
    
}
#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;
    
}
 
#earth{
    background:#523723;
    border-top:20px solid #090;
    bottom:0;
    height:50px;
    position:absolute;
    
}
 
#ball1, #ball2{
    border-radius:30px;
    height:50px;
    position:absolute;
    top:80px;
    
}
#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.



IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Which topic are you interested in?

Mobile

Security

Networks/IoT

Cloud

Data Storage

Applications

Development

IT Management

Other

What is your company size?

What is your job title?

What is your job function?

Searching our resource database to find your matches...