jQuery .animate() Method - Part 1
Introduction
In short, jQuery .animate Method used to perform a
custom animation of a set of CSS properties. .animate() Method comes in two flavor. First takes four arguments and second takes two arguments.
First
Flavor
.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
Flavor
.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 Flavor
Let's setup the demonstration page for first flavor,
find the code below.
As in above image, when I click on page (anywhere on
HTML area), the entire jQuery method will get execute. I have attached
animation to bee named (id) image and animate method has five properties. First
one is opacity to toggle, means when I click, opacity will range (run) from 0
to 100 (here 0 means no opacity and 100 means full opacity, image will get
hide) and all within limited time that is 2000 milliseconds. Second one is left,
means at each click, image will be pushed from left side to 50px. Third one is
top, this is also same as last one, at each click image will be pushed from top
to 50px. Four and fifth are height and width, both has toggle property. Means
on first click, height and width property will run from original size (that is
200) to 0 (means image will be invisible) and on second click, again height and
width property will run from 0 (invisible) to original size (that is 200). At the
end of each click, a method will get fire and it will alert by message "Animation
Finished".
Look at the animated screen.
Setup
Demonstration Page for Second Flavor
Let's setup the demonstration page for first flavor,
find the code below.
As in above image, when I click on right id button, the
jQuery method attached with this will get execute. And in this execution, I
have attached an animation with a image whose id is "bee", on each click image
will be pushed from left to 50px at slow speed. Just opposite execution will
take place when we clck on left id button.
Look at the animated screen.
Note: Don't forget to set object's (that will animate) style 'position:relative'.
Download the Source Code to test it yourself. I hope you like it.
Comments
Post a Comment