The .animate() method allows you to have animation effect on elements. The .animate() method only work with CSS criteria that have numeric values. There are some properties that have slightly different notation with jQuery than with CSS, as jQuery does not use dashes.

Here is a list of some of the CSS properties that can or can not be animated:

CAN ANIMATECAN'T ANIMATE
width fontSize color
height opacity background-color
left marginTop font-family
right marginLeft   
top    
bottom    

With .animate() you can have an element slide across the screen or have an image get larger or smaller. You can not make hidden elements visible or visible elements fade, unless you change the opacity to 0;

Other jQuery methods can animate elements as well, such as .fadeIn(), fadeOut(), .toggle(), .hide(), .show() and .toggle().

 

.animate() duration

You can choose to have the animation go "slow", or "fast". If you want more control over the speed, you can give numeric values for the durantion of the animation. These numeric values are given in milliseconds. For example an animation duration of 4000 will take 4 seconds to complete itself.

The value for the duration goes after the closing curly bracket and a comma, but before the closing parenthesis.

$("h1").animate({marginTop: "145px"}, 1000);

 

.animate() easing effects

You can also apply an easing effect to the .animate() method. The core jQuery file allows for two easing effects, "linear" and "swing". The linear effect progesses with the animation at a steady rate. The swing effect starts slowly, then progresses evenly, then ends slowly. There are a number other effects that can be applied if you link to the jQuery easing plugin file. You can download this file at: http://gsgd.co.uk/sandbox/jquery/easing

The value for easing goes after the duration and is enclosed in quotation marks.

$("h2").animate({marginTop: "145px"}, 1000, "easeInOutElastic");

 

Example of .animate()

$("h2.slideOver").click(function(){
    $(this).animate({
        marginLeft: "128px",
        marginTop: "45px",
        fontSize: "100px"
    }, 2000)  // Duration of 2 seconds END animate
});  // END .click()

<h2 class="slideOver">Click Me</h2>

Try it below