jQuery jQuery .animate() Method Animation with callback

Example

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>");
     }
  });