Paul Cooper

I have been using jQuery for a little over a year now, and I have to say… I would be well and truly lost without it. It has enabled me to create rich and engaging web applications in very little time.

I have been trying to teach jQuery to a few people recently. Although they were able to get to grips with it very quickly, I noticed that they were intimidated by the animate function. Their animations were constrained to using only the show, hide and toggle methods – which are very basic indeed!

Guys, animation really isn’t complicated with jQuery. And in a few simple snippets I am going to show you how easy it is to get something together!

#bar { position: absolute; width: 100%; height: 0px; top: 0; left: 0; background: red; }

If you create a new html page and insert the above html and css, aswell as including jQuery we will begin…

$(document).ready(){
$('#bar').animate({height: '300px'}, 1000);
}

Above is a very simple piece of code, onload this will execute an animation on the element with the id bar – animating its height to 300px in 1000 milliseconds. The first argument you pass to the method is an object, this object can consist of a number of css attributes that you would like to animate. For example:

$(document).ready(){
$('#bar').animate({height: '300px', width: '50%', top: '50%'}, 2000);
}

Does that make sense? I will continue this write up as soon as I have a minute free and show (with examples) how to create some interesting and complex animations. I may even go into some depth on how to animate background colour’s using the jQuery UI Effects library!

Here is a great yet subtle example of using jQuery animate combined with the jQuery UI Effects Library

http://www.coolography.co.uk/

If you scroll up and down the page watch the Coolography logo in the top right, you can see it change colour according to the section you are in.