0
0
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:
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.
See the prices for this post in Mr.Bool Credits System below: