jQuery .animate() Method Part 1

Introduction

In short, the jQuery .animate method is used to perform a custom animation of a set of CSS properties. The .animate() method comes in two flavours. The first takes four arguments and the second takes two arguments.

First Flavour

.animate( properties [, duration] [, easing] [, complete] )

Properties and values: A map of CSS properties that the animation will move toward.

Duration or Speed: A string or number determining how long the animation will run.

Easing: A string indicating which easing function to use for the transition.

Complete: A function to call once the animation is complete.

Second Flavour

.animate( properties, options )

Properties and values: A map of CSS properties that the animation will move toward.

Options: A map of additional options to pass to the method.

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

Setup Demonstration Page for First Flavour

Let's setup the demonstration page for the first flavour; find the code below.

As in above image, when I click on the page (anywhere in the HTML area), the entire jQuery method will be executed. I have attached an animation to be named (id) image and the animate method has five properties. The first one is opacity to toggle, which means when I click, the opacity will range (run) from 0 to 100 (here 0 means no opacity and 100 means full opacity, the image will be hidden) and all within the limited time that is 2000 miliseconds. The second one is left, which means that for each click, the image will be pushed from the left side to 50px. The third one is top, this is also the same as the last one, at each click the image will be pushed from top to 50px. Fourth and fifth are height and width, both have the toggle property. Which means on the first click, the height and width property will run from the original size (that is 200) to 0 (which means the image will be invisible) and on the second click, again the height and width property will run from 0 (invisible) to the original size (that is 200). At the end of each click, a method will fire and it will show an alert with the message "Animation Finished".

Look at the animated screen.

Setup Demonstration Page for Second Flavour

Let's setup the demonstration page for the first flavour, find the code below:

As in the above image, when I click on the right id button, the jQuery method attached to this will be executed. And in this execution, I have attached an animation with an image whose id is "bee", on each image click it will be pushed from the left 50px at a slow speed. Just the opposite execution will take place when we clck on the left id button.

Look at the animated screen.

Note: Don't forget to set the object's (that will animate) style to "position:relative".

Download the source code and test it yourself. I hope you like it.