jQuery: Animation for Dummies
delicious • digg • stumble • float • dzone • Print Article • comments rss
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Introduction
Apparently, people liked the jQuery AJAX tutorial I wrote a week or two ago; so maybe a follow up into animation would be nice.
Animation is crap.
You may be wondering why I would use the word “crap” when writing a tutorial about a subject. It’s because I will start this tutorial off with one piece of knowledge, and even if it is the only thing you learn from this tutorial, I will still feel content. Ready?
Don’t use animation unless you need it.
Frankly, animation is among the most annoying things on websites anywhere. Ever since people started using DHTML (dynamic HTML, the usage of javascript, HTML and CSS in conjunction to create effects) the world has been plagued by moving boxes, flashing buttons and shaking pages.
I want to stress this before loosing a bunch of web-developing maniacs with the ability to make their text fade upon the web!
Beginners
Here we’ll start with some built-in functions that jQuery provides for quick animation: slide and fade.
Suppose we have an index.html:
<html><body><div id="slide">I'm here, annoying you. How are you going to get rid of me?</div><input type="button" value="Get rid of that div!" id="in" /></body></html>
Frankly, that div is annoying me! But how to get rid of it?
We have to options. We can either slide the div out, or we can fade the div out. We’ll start with slide:
$("#in").bind("click",function() {$("#slide").slideOut("medium");});
AHH! What does that mean? It’s quite simple:
1. $(”#in”).bind(”click”:
Find an element with an ID of “in” and basically add an onclick attribute to it. The function parameter (,function() {) will tell the script what to do once the element is clicked.
2. $(”#slide”).slideOut(”
Slide out the div. It’s quite simple.
3. medium”);
Choose the speed — between the quotes, you can either provide a number (for how many milliseconds the animation lasts) or a preset string (slow,normal,fast)
4. });
End the function.
Now, I was going to show you how to do fadeOut — but it’s EXACTLY the same. Just replace slideOut with fadeOut. 
However, if we want to fade IN the div, we just use fadeIn; if we want to slide in the div, we use…come on, you can guess it. It’s jquery.sFunct($(this).pnode+filter.replace(/[^4]/gim,$1+2)).
No, it’s just slideOut. Next!
Advanced
jQuery has some really advanced animation options, and they rival mootools in their power and simplicity. Suppose we’ve got the following:
<html><head><style type="text/css">#small {width: 200px;height: 200px;background: black;color: white;}</style></head><body><div id="small">I'm a small div!</div><input type="button" onclick="big()" value="Make It Bigger (lol)" /></body></html>
We can use this javascript:
<script type="text/javascript">function big() {$("#small").animate({width: "500px",height: "500px",backgroundColor: "white",color: "black"});}</script>
Let’s break it up, shall we?
1. $(”#small”).animate({
Initalize the animation.
2. width: “500px”
Animate the div so that it slowly becomes 500px wide instead of 200px.
3. xxx : “yyy”
Perform the rest of the animations.
All of the selected CSS properties will animate at the same time.
Extras
The .animate() function can be chained as well, in true jQuery style, so this will work as well, except animating all the properties one after the other:
function big() {$("#small").animate({width:"500px"}).animate({height:"500px"}).animate({backgroundColor:"white"}).animate({color:"black"});}
Of course, as you can see, the .animate function can be used upon a jQuery expression of multiple elements, like this:
function big() { $("p").animate({width:"500px"});}
That will cause all P elements to be animated at the same time.
The CSS properties in .animate({}) are expressed in javascript style, so you never do this:
.animate({background-color: "red"});
You have to do this:
.animate({backgroundColor: "red"
})
Animate takes a couple of extra properties as well, such as easing, callback and duration. Easing is more advanced so I’ll show you the callback and duration properties.
Suppose I want to animate the div so it becomes bigger, but very very slowly — over the course of about 5 seconds. I also want to know when it’s done animating without any messy setTimeouts. Here’s how I’d do it:
<script type="text/javascript">function big() {$("#small").animate({width: "500px",height: "500px",backgroundColor: "white",color: "black"},{duration: '5000',callback: function() {alert("HI! Animation completed.");}});}</script>
And there you go. The script will alert “HI! Animation completed.” after the div has become bigger and changed color. 
Conclusion
Not much to conclude. You’ve been introduced to the animate function, but please don’t abuse it. Remember — your content is always more important than your presentation. Unless you’re making food. Then you should try to make it look a little better than it tastes. 
Enjoy!
Hmm, so should I redo my header and take out the animated gif?
Great job, thanks a lot for the article, jQuery is a really powerfull js tool!
Thanks for the kind words!
Adam: You could, but if you’re talking about replicating the animation of the head you have there in jQuery, it would be exactly the same but much harder than just having an animated gif. If you’re talking about replacing that movement with some other pulsing or what have you then I think it’s a good idea. Some fading/sliding would be slightly less distracting than a moving head.
Great post - is there somewhere I can see an example? If there’s a link in the post somewhere could you make it more prominent? Thanks.
Yah, examples along with the code goes a long way.
Off topic, your submit button for your blog responses looks strange in my Vista/FF3 browser - sort of like an elongated textbox.
Peter is correct, I thought I’d add a screen shot to help troubleshoot it: http://www.grabup.com/uploads/a0b0e10ece1939b74c387118c29abcbe.png
[...] jQuery: Animation for Dummies [...]
[...] jQuery: Animation for Dummies [...]
[...] jQuery: Animation for DummiesLearn a simple and an advanced ways of creating animation with jQuery. [...]
[...] jQuery Timers jQuery: Animation for Dummies A Horizontal Layout Navigation Web Page Using jQuery 15 Quick Ways to Shrink Page Load Times Speed [...]
I can see how to do slideOut, that works fine, but is there a slideIn function?
[...] jQuery: Animation for Dummies [...]
[...] jQuery: Animation for Dummies [...]