Easy Does It

While on the topic of animation there is an important element to consider called easing. This is basically a speeding up or slowing down of the animation, it also can be used to handle the actual control of animation using the two types of easing: linear and swing. As the names imply a linear animation is just a constant rate of motion; like a straight line. On the other hand a swing animation can start off fast, then slow down and then end the animation fast again. Lets look an example of both:

$('#importantMessage').animate({'height' : '-=200px'}, 2000, 'swing');

$('#importantMessage').animate({'height' : '+=200px'}, 2000, 'linear');

In this example we have the swing animation which will appear as a more natural animation while the linear animation will just appear to increase dramatically, then increase slightly, and finally finish the increase in size dramatically.

This is just the basic animation method. I encourage you to visit the jQuery libraries and find other more advanced forms of easing that use more elaborate algorithms to make the easing even more pronounced. For example there are additional jQuery libraries that do easing with an elastic look, or with a bounce, or even in circular motions among many other types of easing.

Sometimes you will notice your animation will be a little "bouncy". In other words it appears that the animation moves around slightly. This may be due to animating an element that is next to a tag with a margin. Typically to prevent this you will want to remove margins from any offending tags.