jQuery is a JavaScript framework which intends to easily develop interactive websites and user interfaces with a few lines of code.jQuery animate is quite common and useful function to add animation functionality.
Let’s start from SYNTAX
1 2 3 | .animate( properties, [ duration ], [ easing ], [ callback ] ) |
Parameters in this function, properties parameter is mandatory and others are semi-optional which means you can use it as per your requirement.
Let’s learn the animate() function with a set of examples.
Step 1:
First of all,include the jQuery javascript library in < HEAD > tag of your file:
1 2 3 4 | src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
Here, I have included the latest version of jQuery core library.
Step 2:
Now, let’s place HTML code.I have developed a demo so you can easily understand the code.Place HTML code into the < BODY > tag.
1 2 3 4 5 6 7 8 9 | <input type="button" value="<<" id="btnLeft" /> <input type="button" value=">>" id="btnRight" /> <input type="button" value="/\" id="btnUp" /> <input type="button" value="\/" id="btnDown" /> <a href="#" id="link-fade">Fade</a> <a href="#" id="cross">cross</a> <div id="box"> |
Here, we are using a sample DIV tag with id box for animating.
Step 3:
Next is an important part, jQuery animate code and let me explain it one by one.
1 2 3 4 5 | (function ($) { // code here }); |
passing jQuery into anonymous functions that mean it gives the guarantee that $ will work for jQuery.
Next, Let’s see the code for Left animation of a box.
1 2 3 4 5 6 7 8 9 10 | $(function(){ var leftPos = 0; var topPos = 0; $("#btnLeft").click(function(){ leftPos = leftPos - 100; $("#box").animate({ left: leftPos + 'px' }, 1000); }); }); |
Above code will animate the box into the left direction.you can use same code for right direction by placing + rather than -.
1 2 3 | leftPos = leftPos + 100; |
Next, is about the top and bottom animation of a box which is same like the above but just the variable and parameter is different.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("#btnUp").click(function(){ topPos = topPos - 100; $("#box").animate({ top: topPos + 'px' }, 1000); }); $("#btnDown").click(function(){ topPos = topPos + 100; $("#box").animate({ top: topPos + 'px' }, 1000); }); |
We can use an animate function for the effect also. so let’s see some more effect with the animate function like fade and cross.
Fade Effect:
1 2 3 4 5 6 7 | $("#link-fade").click(function(){ $("#box").animate({ opacity: 0 }, 1000); }); |
For fade effect with animate function in jQuery, you need to place opacity into it.
Cross Effect:
1 2 3 4 5 6 7 8 9 10 | $("#cross").click(function(){ topPos = topPos + 100; leftPos = leftPos + 100; $("#box").animate({ top: topPos + 'px', left: leftPos + 'px' }, 1000); }); |
For cross move effect with animate function in jQuery, you need to place both leftPos and topPos into it.
DEMO
Thanks for reading and feel free to share your thoughts, don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
