$('item').animate({marginLeft:"800px"},500);  
  //where 500 is the time in ms for the effect to occur in
  

That's great, but what if you wanted to control how that item got animated towards the end-point in a more generic way.That's where jQuery's Effect functions come into play. By default, jQuery provides us with functions like slideUp and slideDown, fadeIn and fadeOut as well as hide() and show(). You can click on these to see the official documentation on the function, but in short they let you slide items from one position to another, fade in and out or hide or be displayed within a specific amount of time. They're very useful and can be incredibly powerful.

Basic Effects

This text will be slid up and then slid back down. This is achived using 
chaining 
 but don't worry..you can use each effect on its down
   
   

This text and the div above will be hidden


  

This code expands the width from 400px to 500px
and when done, it expands the height from 20px to 150px

  
News Headline: This div is about to do something cool.

    As you can see we've just revealed some more information that's visible in the original div but not in the css view we've created
  

    

  

Moving an item across the page

News Headline: This div is about to do something cool.

    As you can see we've just revealed some more information that's visible in the original div but not in the css view we've created

    

    
  
  
Moving an item across the page
     
  
  

  
   
  

Advanced

Animating the widths of 3 divs using an interval to update their values over 10 seconds

 A News Headline