Skip to main content

jQuery .animate() Method

Animation with callback​

Sometimes we need to change words position from one place to another or reduce size of the words and change the color of words automatically to improve the attraction of our website or web apps. JQuery helps a lot with this concept using fadeIn(), hide(), slideDown() but its functionality are limited and it only done the specific task which assign to it.

Jquery fix this problem by providing an amazing and flexible method called .animate(). This method allows to set custom animations which is used css properties that give permission to fly over borders. for example if we give css style property as width:200; and current position of the DOM element is 50, animate method reduce current position value from given css value and animate that element to 150.But we don't need to bother about this part because animation engine will handle it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $("#btn1").click(function () {
    $("#box").animate({ width: "200px" });
  });
</script>

<button id="btn1">Animate Width</button>
<div
  id="box"
  style="background:#98bf21;height:100px;width:100px;margin:6px;"
></div>

List of css style properties that allow in .animate() method.

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent,

Speed specified in .animate() method.

milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"

Easing specified in .animate() method.

| |---|---|---|---|---|---|---|---|---|--- |"swing" |"linear"

Here is some examples with complex animation options.

Eg 1:

$("#book").animate(
  {
    width: ["toggle", "swing"],
    height: ["toggle", "swing"],
    opacity: "toggle",
  },
  5000,
  "linear",
  function () {
    $(this).after("<div>Animation complete.</div>");
  }
);

Eg 2:

$("#box").animate(
  {
    height: "300px",
    width: "300px",
  },
  {
    duration: 5000,
    easing: "linear",
    complete: function () {
      $(this).after("<p>Animation is complete!</p>");
    },
  }
);

Syntax​

  1. (selector).animate({styles},{options})

Parameters​

ParameterDetails
propertiesAn object of CSS properties and values that the animation will move toward
duration(default: 400) A string or number determining how long the animation will run
easing(default: swing) A string indicating which easing function to use for the transition
completeA function to call once the animation is complete, called once per matched element.
startspecifies a function to be executed when the animation begins.
stepspecifies a function to be executed for each step in the animation.
queuea Boolean value specifying whether or not to place the animation in the effects queue.
progressspecifies a function to be executed after each step in the animation.
donespecifies a function to be executed when the animation ends.
failspecifies a function to be executed if the animation fails to complete.
specialEasinga map of one or more CSS properties from the styles parameter, and their corresponding easing functions.
alwaysspecifies a function to be executed if the animation stops without completing.