Understanding jQuery animate() function
zhangmingming 2013-05-29
文章源自:http://viralpatel.net/blogs/understanding-jquery-animate-function/
Understanding jQuery animate() function
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");
});Also following will be the code to animate Width of the element.
$("#animate").click(function() {
$("#content").animate(
{"width": "350px"},
"fast");
});Animate opacity
$("#animate").click(function() {
$("#content").animate(
{"opacity": "0.15"},
"slow");
});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");
});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");
});
});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);
});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);
}); 