Learning About The Animation Abilities Of jQuery
Jeffrey Jordan Way 06/08/2008
I know that a large number of my recent posts have focused on jQuery. For those of you that are uninformed/uninterested in this library, I’d really advise that you spend a couple hours working with this framework. Few things in recent memory have gotten me as excited as jQuery (at least when referring to the web). I’m sure you’ve heard from many people that, “jQuery makes coding Javascript fun again..”. No longer do you have to worry about compensating for all of the different browsers (something I hated); No longer do you have to write ten lines of code just to edit an element. jQuery fixes all of that. If you are still unconvinced, why not read “Why Aren’t You Using jQuery”. This articles will take you step by step from the very beginning.
This post will focus on the animation features that come with the core jQuery library. We’ll first focus on the simple “Show/Hide” type methods, and then we’ll move on to some custom animation. So let’s get right into things…
Simple Animations
Some of these features have already been outlined in my earlier jQuery articles. Please reference them if you need any more help.
What Do The “Show” and “Hide” Methods Actually Do?
Applying the “Hide()” method to an element in your document will change the display to “none”. The following CSS and jQuery fragments are identical in function.
#someElement
{
display: none;
}
$(“#someElement”).hide();
As I’m sure you can figure out for yourself, the “Show()” method will change the display back to its original state. Once again, the following fragements perform identically.
#someElement
{
display: inline;
}
$(“#someElement”).show();
Do The “Show” and “Hide” Methods Animate The Elements?
Yes and no. Without passing any parameters in, there will be no animation. But, what if, when we applied the “Show” method, we wanted the element to slowly become visible? All that we would have to do in this case is add the “slow” keyword to our method. For example…
$(“#someElement”).show(“slow”);
Now, when this code runs, the element will slowly become visible over .6 seconds. For the speed parameter, we can either use keywords to specify the length at which an animation runs. We could use “slow”, “normal” and “fast” (.6, .4, and .2 seconds, respectively). Alternatively, we can specify the speed by using numbers by doing…
$(“#someElement”).show(1000);
This will make the element become visible over the course of one second, or 1000 milliseconds. Notice that when we use keywords, quotation marks are used. However, when specifying with numbers, they are left off.
The wonderful thing about the “Show()” method is that we’re actually getting quite a bit of bang for our digital buck. With this one method, we’re changing the opacity, width, and height values. The other animation methods that come with the jQuery library, on the other hand, only change one specific property.
FadeIn() and FadeOut()
The Fade methods alter the opacity of an element only. FadeOut() will reduce the opacity of an element over a specified period of time until it ultimately becomes invisible (display: none). FadeIn() obviously does the opposite. As with the Show and Hide methods, we can pass in our “slow”, “normal”, and “fast” keywords. Let’s say that we wanted to grab an anchor tag and fade it out slowly when it is clicked. First view the example and then review the code.
$(document).ready(function()
{
$("#someId").click(function()
{
$(this).fadeOut("slow");
});
});
Here we are stating that when the document is ready to be manipulated, we’re going to listen for when an anchor tag with an id of “someId” is clicked. When it is, we’re going to grab this (the anchor tag that was clicked) and fade it out slowly.
slideUp() and slideDown()
The Slide methods alter the height of an element only. If we have an element that has its display set to none. When we apply the “slideDown” method, the element will become visible and slide down from the top until it reaches its specified height. As always, keywords or numbers must be specified in the parameter.
Custom Animations
In many situations, you’ll need greater control over your animations. In such instances, the core animation methods won’t do. Now, we’re going to move on to some advanced custom animations.
Moving An Element Across A Page
In this simple example, we’re going to shift an image across a page when it is clicked. View the example. Let’s assume that we have a blank html document that has an image tag with an id of =”theImage”. First, we’ll set the CSS.
#theImage
{
position: relative;
}
In order to move the image, we’re going to alter the “left” property. However, an element must be positioned in order to affect its top, left, bottom, and right properties. Still confused about relative and absolute positioning? Now, we’ll add our jQuery.
$(document).ready(function(){
$("#theImage").click(function()
{
$(this).animate
({left: "400px"}, 3000);
});
});
Here we are creating a click event for our image. We’ll then add the “animate” method.
The correct syntax for the animation method is as follows: .animate({property: “value”}, speed, callbackFunction);.
We’re shifting the element to the right by 400 pixels over the course of the three seconds, or 3000 milliseconds.
Multiple Animations
Let’s say that, building upon our last example, we wanted our image to slide to the right and then increase its width. Could we do the following?
$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
width: “300px”
}, 3000);
The answer is no (at least not exactly). If you go back and read our objective, we want the image to slide all the way to the right and then, once it is has completed, we will change the width of the image to 300px. The way that the code is written right now, the two animations will occur simultaneously. The image will slide to the right while changing its width. So how can we “queue” our animations?
$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
}, 3000);
$(this).animate
){
width: “300px”
}, 3000);
Now that we’ve separated the animations, the “width” of the element will not be changed until the “left” positioning has been completed. This is referred to as “queued animation”...or chaining.
Combining What We’ve Learned
View The Example
In this next example, we are going to shift an image, when clicked, to the right and change the opacity from 10% to 100%. When this animation is complete, we are going to fade the image out over the course of three seconds. First we’ll edit our CSS file a tad.
#theImage
{
position: relative;
display: none;
}
In order to alter the “left” property of the element, it needs to be relatively positioned. We are also setting the display to none so that we can slowly fade the image in as it progresses across the screen. Now for the jQuery!
$(document).ready(function(){
$("#theImage").css("opacity", ".1");
$("#theImage").click(function()
{
$(this).animate
({left: "400px", opacity: "1"}, 3000, function()
{
$(this).fadeOut(3000);
}
);
});
});
.CSS Can’t Be Queued!
What if, after the image has been shifted and faded in, we wanted to change the CSS by doing…
.css(“border”, “5px solid red”);
Unfortunately, you won’t receive the desired response. The CSS will be changed immediately instead of waiting for the other animations to complete. So how can you queue a method that isn’t an effect? The answer is by using “callback” functions (which we’ve already utilized in the previous example). Here is our revised code.
$(document).ready(function(){
$("#theImage").css("opacity", ".1");
$("#theImage").click(function()
{
$(this).animate
({left: "400px", opacity: "1"}, 3000, function()
{
$(this).css(“border”, “5px solid red”);
$(this).fadeOut(3000);
}
);
});
});
Callback functions allow you to declare functions as soon as an effect has completed. They can be applied to all of the jQuery effect methods.
$(“#someElement”).slideDown(“normal”, function()
{
...some code goes here
});
);
This code is finding an element with an id of “someElement”. Once it is found, it will slide the element down to its full height over the course of .4 seconds (normal speed). When that animation has been completed, a function will be run.
I hope this article has helped you. If it has, please Digg or Stumble it so that other developers can learn from it too.