MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Create Animations with jQuery

In this article we will see how to create animations with jQuery Animate.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

JQuery is a great javascript library that has several methods that help the life of any developer.

A very interesting method that can be well explored is .animate(), it controls CSS properties to perform animations in HTML elements. Its use becomes very simple, and enables developers to create effects ranging from small to large animations.

We will see here how to create a simple animation with two balls, simulating a beating on the other, so we can learn how this method works.

We start with the HTML already including jQuery library.

Listing 1: HTML Code with jQuery Included

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=" http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>Animate jQuery - MrBool Tutorial</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. A #box will serve to "hold" the other three, then we have a #ball2 and #ball1 and that will be that we animate two balls and div #earth will be based, like the ground.

Listing 2: Inserting the CSS code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=" http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>Animate jQuery - MrBool Tutorial</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 the CSS code above can make shapes to form. We will put in the #ball1 and #ball2 a border-radius to simulate a ball, and a position: absolute. So we can track their position on the screen. In the div #earth has nothing else, just a background and a border-top to create a drawing of a surface.

We will see below the jQuery code.

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 - MrBool Tutorial</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 can be summed up in two parts, the second starts exactly when the first ends.

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

Listing 4: .animate() Method

.animate( properties, duration, easing, complete )

The result of our code is:

Result of article

Figure 1: Result of article

In Properties we put on the CSS properties that defined the movements of the animation.

In duration we can enter a value in milliseconds, that says how long it will last.

The easing is how the transitions will run, I will not explain more here, but there are other options that insert libraries of easing(http://gsgd.co.uk/sandbox/jquery/easing/).

In place of complete we can insert any function that will be executed once the animation finishes.

First we move the div #ball1 to right, do it by changing the value of property left to 50px inside the animate method. As the initial value, defined in CSS, was -50px, the animation will conduct a movement to the right. This animation will work during 300 milliseconds and will not have any kind of easing.

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

In the second step we move to another div #ball2 to right, changing the left property to 200px. Similarly to the previous step, also had an initial value to left, which was 130px, increasing this value the element will move to the right. Just below we make the first animated div, #ball1move back a little, simulating a hit, again changing the value of property left to 75px.

If you want to download the source code used in our tutorial, you can do it at the article's beginning.

You can see the DEMO in this link.

We finish this tutorial here, I hope I was able to explain the basic workings of the method.

See you in the next article.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login