jQuery Animate : Effects

jQuery Animation Effect :

jQuery animate() function is used to manipulate html elements and add animation functionality to that element.Firstly look at the syntax of the function -

.animate(properties,[duration],[easing],[callback])

Explanation of Syntax :

Parameter Explanation
properties An object of CSS properties and values that the animation will move toward.
duration A string or number determining how long the animation will run.
easing A string indicating which easing function to use for the transition.
callback A function to call once the animation is complete.

Now consider the following examples of animate method,

Example #1 : Increase the width of the Div tag

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      width:'300px'
    });
  });
});

Try it Yourself »

Example #2 : Increase the width of the Div tag