The animate method

Previously in my last blog I discussed simple ways to fade in and out text or simply toggle it. However, you can use an even more powerful method called animate(). This allows you to do even more manipulation of the CSS properties of a DOM element. A sample example of the animate function is:

$('p').animate({ padding: '40px' }, 2000);

In this example the animate function is working on the paragraph tag in the DOM. This will change the padding of the paragraph tags on this page over a period of 2 seconds. The second parameter 2000 is the number of milliseconds to complete the animation, which is the equivalent of 2 seconds.

Another animation example:

$('#notice').animate({ opacity: 'hide' }, 'fast');

This simply hides the notice and does the animation quickly. There are many examples that we could continue to show but they are very similar and the power of what animate can do should convince you to use the method frequently.