.animate()
Syntax
$(selector).animate( properties, [duration,] [easing,] [complete] )
Parameters
properties- A map of CSS properties
duration (optional)- A string or number determining the during
easing (optional)- A string indicating which easing function
callback (optional)- A function to call once the animation is complete
.animate(properties, options)
Parameters
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 are:
duration- A string or number determining during
easing- A string indicating the easing function
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
Return value
The jQuery object, for chaining purposes.
Description
$.animate() accepts an object with the properties to be animated, the duration of the animation, a string denoting the easing algorithm to use, and a callback function executed upon completion:
The .animate() method allows us to create animation effects on any numeric CSS property.
All animated properties are treated as a number of pixels, unless otherwise specified. The units em and % can be specified where applicable.
Durations are given in milliseconds. The higher values indicate slower animations.
The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
If supplied, the callback is fired once the animation is complete.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
position: relative;
left: 0;
top: 0;
width: 10px;
height: 10px;
background-color: blue;
}
</style>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).click(function(event) {
$("div#box").animate({
left : '+=100px'
}, 200);
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
You can change more than one attribute at a time.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img#alien {
position: relative;
left: 0;
background-color: blue;
}
</style>
<script
src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(document).width();
var duration = 1000;
$(document).click(function(event) {
$("#alien").animate({
opacity : 0,
width : 10,
height : 10,
left : '+=1000px'
}, duration);
});
});
</script>
</head>
<body>
<img id="alien" src="ufo.png">
</body>
</html>
Animate with canvas element
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {
width: 100px;
height: 100px;
top: 0;
left: 0;
position: absolute;
}
</style>
<script
src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
var rect_ctx = $("canvas#rect")[0].getContext("2d");
rect_ctx.fillRect(0, 0, 50, 50);
$(document).click(function() {
$("#rect").animate({
left : '+=800px'
}, 200);
});
});
</script>
</head>
<body>
<canvas id="rect"></canvas>
</body>
</html>