jQuery chainable transition effects

One of the most interesting thing of jQuery transition effects is that they can actually be combined together to create a chain of effects. For example, given a simple div with the following styles:

#test {
 background: #00c;
 height: 100px;
 width: 100px;
 position: relative;
}

we can write the following jQuery code:

$(document).ready(function(){


 $("#run-demo").click(function(){
 
  $("#test").animate({opacity: "0.1", left: "+=400"}, 1200)
  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
  .animate({top: "0"}, "fast")
  .slideUp()
  .slideDown("slow")
  return false;
 
 });

});

We've used the animate() method several times in order to create our chainable effects. For example, we've modified the left, width and height properties of our test box to create a movement effect and a shrink-and-expand effect. You can see the final result here.