jQuery Animation Effect - jQuery animate() Method

jQuery animate() method is used to create custom animations of a set of CSS properties. For example height, width margin, padding, top, left, opacity etc. However non-numeric properties such as background-color, color can not be animated using the jQuery animate() method.

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

Syntax

$(selector).animate( {properties}, [duration], [callback]);

Parameters

  • properties Required An object of CSS properties and values to be animated.

  • duration Optional. default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).

  • callback Optional. A function to call once the animation is complete.

Example

$(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...   »