Use jQuery .animate() method to do animation
Syntax
$(selector).animate( properties, [duration,] [easing,] [complete] )
Parameters
properties
A map of CSS propertiesduration (optional)
A string or number determining the duringeasing (optional)
A string indicating which easing functioncallback (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 towardoptions
A map of additional options to pass to the method. Supported keys are:
duration
A string or number determining duringeasing
A string indicating the easing functioncomplete
A function to call once the animation is completestep
A function to be called after each step of the animationqueue
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediatelyspecialEasing
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 {<!--from w w w .j a v a 2 s. c o m-->
position: relative;
left: 0;
top: 0;
width: 10px;
height: 10px;
background-color: blue;
}
</style>
<script src="http://java2s.com/style/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>
Animate more than one attribute
You can change more than one attribute at a time.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img#alien {<!--from w w w .ja v a 2 s . c o m-->
position: relative;
left: 0;
background-color: blue;
}
</style>
<script src="http://java2s.com/style/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>
<div id="alien">java2s.com</div>
</body>
</html>
Animate canvas
Animate with canvas element
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {<!-- ww w. jav a2s . co m-->
width: 100px;
height: 100px;
top: 0;
left: 0;
position: absolute;
}
</style>
<script
src="http://java2s.com/style/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>