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:


  $("#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")
  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.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.