jQuery animate() Method

jQuery animate() method perform custom animation using element's CSS properties.

Syntax

This syntax represent to the animate method

$(selector).animate( properties, [duration, easing, callback] );
Parameter Type Description
properties Object Required. Specifies an object of CSS properties and values to be animated.
Following CSS Properties that can be animated,
duration Number
String		 Optional. Accept string or number that determining how long animation will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - animation moves slows at the starting and ending, but faster in the middle
  • "linear" - animation moves in a constant speed
callback Function Optional. A function to call once the animation is complete.

Alternative Syntax

This syntax is also acceptable for the animate method

$(selector).animate( properties, [options] );
Parameter Type Description
properties Object Required. Specifies an object of CSS properties and values to be animated.
options Object Optional. Specifies additional parameters for the animation.
Accepted values:
  • duration - how long animation will run the animation
  • easing - specifies the easing function to use for the transition
  • complete - specifies function to call once the animation is complete
  • step - specifies function to be executed for each step in the animation
  • progress - specifies function to be executed after each step in the animation
  • queue - specifies boolean value whether to place the animation in the effects queue.
  • specialEasing - specifies one or more CSS properties from the styles parameter, and their corresponding easing functions
  • start - specifies function to be executed when the animation begins
  • done - specifies function to be executed when the animation ends
  • fail - specifies function to be executed if the animation fails to complete
  • always - specifies function to be executed if the animation stops without completing

Examples

Following are few animate() method examples,

  1. jQuery animate() - Single Property
  2. jQuery animate() - Multiple Properties
  3. jQuery animate() - Relative Values
  4. jQuery animate() - Queued Animations
  5. jQuery animate() - Pre-defined Values

jQuery animate() - Single Property

$(document).ready(function() {
  $("button").click(function(){
    $("div").animate({fontSize:"60px"}, 1000);
  });
});

Run it...   »

jQuery animate() - Multiple Properties

You can animate multiple properties of an element at the same time using the animate() method. All CSS properties animated without any delay.

$(document).ready(function() {
  $("#btnstart").click(function(){
    $("#animatebox").animate({
      height: "300px",
      width: "300px",
      opacity: 0.5,
      marginLeft: "100px",
      borderWidth: "10px",
      fontSize: "40px"
    });
  });
  $("#btnstop").click(function(){
    $("#animatebox").animate({
      height: "100px",
      width: "100px",
      opacity: 1,
      marginLeft: "10px",
      borderWidth: "5px",
      fontSize: "15px"
    });
  });
});

Run it...   »

jQuery animate() - Relative Values

You can animate CSS properties by define relative values. you have to use += or -= before the value.

$(document).ready(function() {
  $("#btnstart").click(function(){
      $("div").animate({
        height: "+=200px",
        width: "+=200px"
      });
  });
  $("#btnstop").click(function(){
      $("div").animate({
        height: "-=200px",
        width: "-=200px"
      });
  });
});

Run it...   »

jQuery animate() - Queued Animations

You can animate CSS properties one by one individually in a animate queue using jQuery chaining of an element. 

$(document).ready(function() {
  $("#btnstart").click(function(){
    var $box = $("#animatebox");
    $box.animate({height: "300px"});
    $box.animate({width: "300px"});
    $box.animate({opacity: 0.5});
    $box.animate({marginLeft: "100px"});
    $box.animate({borderWidth: "10px"});
    $box.animate({fontSize: "40px"});
  });
  $("#btnstop").click(function(){
    var $box = $("#animatebox");
    $box.animate({height: "100px"});
    $box.animate({width: "100px"});
    $box.animate({opacity: 1});
    $box.animate({marginLeft: "10px"});
    $box.animate({borderWidth: "5px"});
    $box.animate({fontSize: "15px"});
  });
});

Run it...   »

jQuery animate() - Pre-defined Values

You can animate of an element by using pre-defined values of property's such as "hide", "show", or "toggle".

$(document).ready(function() {
  $("#btntoggle").click(function(){
    $("#animatebox").animate({
      width: "toggle"
    });
  });
});

Run it...   »