Animation in jQuery Effects

We can create animations using animate() method in jQuery. We can animated all css properties which have single numeric value. Non-numeric properties cannot be animated using basic jQuery(For example background-color cannot be animated). The default animate() duration is 400 milliseconds.

The following example shows, how to animate a div box using animate() method in jquery.

Example 1:

<html lang="en">
  <head>
    <title>.animate() in jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
    <style>
      #box{
        height:50px;
        width:50px;
        background:red;
        position:relative;
      }
    </style>
  </head>
<body>
  <input type='button' value='Click' id='btn'>
  <div id='box'></div>
  <script>
  $(document).ready(function(){
    $("#btn").click(function(){
      $("#box").animate({
        width:'70px',
        height:'70px',
      },1000).animate({
        left:'100px',
      }).animate({
        top:'100px',
      }).animate({
        left:'0px',
      }).animate({
        top:'0px',
        opacity:0,
      });
    });
  });
  </script>
</body>
</html>

Try it Yourself

The following example show, how to change background color while animating a div box using step callback function in jquery

Example 2:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='Click' id='btn'> <br><br>
    <div style='position:absolute; left:10; top:50; width:80px; height:80px; background:green; border:1px solid red;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").animate({
            left:"50px",
            top:"100px",
            width:"120px",
            height:"120px",
            borderWidth:"5px",
            opacity:"0.5",
          },{
            duration:1000,
            step:function(){
              $(this).css({'background-color':'#ccc'});
            },
            specialEasing:{
              top:"linear",
              left:"swing",
            },
            complete:function(){
              $(this).html("<h3 style='color:white;text-align:center;'>Hello!!!</h3>");
            }
          }
        );
      });
    });
  </script>
  </body>
</html>

Try it Yourself

Example 3:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='Start' id='btn'> <br><br>
    <div style='position:absolute; left:10; top:50; width:80px; height:80px; background:green; border:1px solid red;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box")
          .animate({left:"50px",top:"100px"},500)
          .animate({height:"100px"},500)
          .animate({width:"120px"},500)
          .animate({borderWidth:"5px"},500);
      });
    });
  </script>
  </body>
</html>

Try it Yourself