Understanding jQuery animate() function
- By Viral Patel on March 9, 2010
jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.
.animate( properties, [ duration ], [ easing ], [ callback ] )
- properties: A map of CSS properties that the animation will move toward.
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- callback: A function to call once the animation is complete.
.animate( properties, options )
- properties: A map of CSS properties that the animation will move toward.
- options: A map of additional options to pass to the method. Supported keys:
- duration: 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.
- step: A function to be called after each step of the animation.
- queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
- specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
Lets learn the animate() function with set of examples.
First include the jQuery javascript library in your html file. Add following in your html <HEAD> tag:
<SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet.
<style type="text/css">
#content {
background-color:#ffaa00;
width:300px;
height:30px;
padding:3px;
}
</style>
<input type="button" id="animate" value="Animate"/>
<div id="content">Animate Height</div>
Animate height/width
Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height.
$("#animate").click(function() {
$("#content").animate(
{"height": "80px"},
"fast");
});
Demo 1:
Also following will be the code to animate Width of the element.
$("#animate").click(function() {
$("#content").animate(
{"width": "350px"},
"fast");
});
Demo 2:
Animate opacity
$("#animate").click(function() {
$("#content").animate(
{"opacity": "0.15"},
"slow");
});
Demo 3:
Moving elements using animate()
<STYLE>
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
Demo 4:
Callback Function
Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element.
Let us see an example where we use callback function to display a message when animation is completed.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px", "width": "250px"},
"slow", function(){
$(this).html("Animation Completed");
});
});Demo 5:
Combine multiple animations
You may want to combine multiple animations. Following are few demos will help you understanding this.
Example 1: Animate both height and width at same time.
This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px", "width": "250px"},
"slow", );
});Example 2: Queuing the animations.
$("#animate").click(function() {
$("#content")
.animate({"height": "100px"}, 500)
.animate({"width": "250px"}, 500);
});
Demo 6:
Queuing of Events
In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument.
$("#animate").click(function() {
$("#content")
.animate({"height": "100px"}, {"queue": false, "duration": 500})
.animate({"width": "250px"}, 500);
});
Demo 7:
Get our Articles via Email. Enter your email address.
Ah… I guess you will explain how internally animate & fx function deals with timer queue!
nice one, but I have something to ask if jquery work in a fancybox…?.
Great tutorial. Thanks!
Love the tutorial…thanks and great work
Really nice one. great work. thanks buddy. try to keep on update
tohh…his is great
This is really great. Thanks for the compilation!
prikitiuw… great tutorial.
thx plen
I lıve jQuery.I love jQuery animation.=)
Awesome tutorial. Thanks lots. God bless you!
nice one, but I have something problem in dremweaver or in browser please solve the problem which browser support this jquiry
i write the code like this in dremweavercs5.5
Untitled Document
#content { background-color:#ffaa00; width:300px; height:30px; padding:3px; } $("#animate").click(function() { $("#content").animate( {"height": "80px"}, "fast"); });Animate Height
but it is not work
ok brother great work it is working nice ,thnaking you ,god is bless you soooooooooomuch you, nice days brother
Thanks for the examples!!
For ‘moving elements’, (demo 4):
If I click on ‘left’…it moves 50px, click again and moves 50px. But I only need to move it once, the second click i want it to be still.
How would I do that?
thanks
@Confusecious – To achieve such functionality you can define a flag and use it to animate/move element only once. For example:
var leftflag = false; $("#left").click(function() { if(!leftflag) { leftflag = true; $("#content").animate( {"left": "-=50px"}, "slow"); } });Hope this works
Very usefull tutorial.