In the past days I received several requests from my readers that asked me to dedicate the new issue of my jQuery Lesson Series to how to implement custom animations of CSS properties of HTML elements. So this post illustrates a basic way to use the jQuery animate() function that allows you to animate easy a property or a group of CSS properties of DOM elements.

For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Simple Animation

Start taking a look at the following example. Here is a list with some items. When an user clicks on a item, the chosen item moves to right and changes the value of its opacity. Try to click on the items listed below:

  • Woork Up
  • Smashing Magazine
  • Mashable
  • TechCrunch

This effect is very simple to implement. Here is the HTML code:

<ul id="mylist">
    <li>Woork Up</li>
    <li>Smashing Magazine</li>
    <li>Mashable</li>
    <li>TechCrunch</li>
</ul>

And here is the JavaScript code:

$(document).ready(function() {
    $("#mylist li").click(function (){
        $(this).animate({ 
            opacity: 0.5,
            marginLeft: "14px",
        }, 400 );
    });
});

You can use the animate() function in this way:

animate({property_1:value, property_2:value, property_n:value}, duration)

Note that you can animate only properties that take numeric values such as width, height, padding, margin, opacity and so on; properties like color, background, are not supported.

Simple Animation 2

Now we can try to implement a more complex effect like the following one. When an user clicks for the first time on a item, the chosen item moves to right and changes the value of its opacity. Then, if the user clicks once again on the same item, the item returns to its initial status. Try to click for two times on the items listed below:

  • Woork Up
  • Smashing Magazine
  • Mashable
  • TechCrunch

The HTML code is the same of the previous example. Here is the JavaScript code to implement this effect:

$(document).ready(function() {
  $("#mylist li").click(function (){
    e = $(this).css("opacity");
    if(e==1){
        $(this).animate({ 
            opacity: 0.4,
            marginLeft: "14px",
          }, 400 );
    } else {
      $(this).animate({ 
            opacity: 1,
            marginLeft: "0px",
          }, 400 );
    }
  });
});

Chained Animations

animate() also allows you to implement chained animations (the animation “X” start once the previous animation has terminated). Here is an example:

  • Woork Up
  • Smashing Magazine
  • Mashable
  • TechCrunch

Chained animations can be implemented using the following JavaScript code (HTML code is the same of the previous two examples):

$("#mylist li").click(function (){
    $(this).animate({width: 300,},400)
        .animate({marginLeft:"30px",},400)
        .animate({opacity:0.5,},400)
        .animate({width:200,},400)
        .animate({marginLeft:"0",},400)
        .animate({opacity:1,},400)
});

The only thing you have to do is to add a sequence of animate() functions with the list of properties you want to animate and the duration of each animation. How you can see in the previous examples this function is really powerful and simple to use. Remember that animate() works only with CSS properties that take numeric values and properties should be specified using camel case (paddingLeft, marginLeft, instead of padding-left, margin-left). For more information about this function take a look here. For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.