.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 {<!--   w w  w  .  jav a  2s . co 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>

Click to view the demo

The code above generates the following result.

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 ww.j a 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>

Click to view the demo

The code above generates the following result.

Animate canvas

Animate with canvas element


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas {<!-- w  ww  . ja v a2  s. 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>

Click to view the demo

The code above generates the following result.

Home »
  Javascript Tutorial »
    jQuery Reference »
      Effect

Javascript Tutorial Effect

.animate()

.css() does animation
.clearQueue()
.delay()
.dequeue()
.extend()
.fadeIn()
.fadeOut()
.fadeTo()
.hide()
.queue()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.toggle()