jQuery: emulating Flash with sequential animations

Flash animations usually take place where the page is loading. They don't need an event to be fired. This could be quite challenging from a jQuery perspective. Fortunately, there are a couple of solutions to mimic this behavior. Imagine now this scenario: we have four hidden images and we want them to appear in sequence when the page loads. I've tried several approaches, but the best is the solution proposed by Dave Methvin and contained in the Chapter 7 of the jQuery Cookbook:

$(document).ready(function() {
  
  
  var $img = $('#gallery img'), img = 0;
  
  (function() {
  
      $($img[img++] || []).fadeIn('slow', arguments.callee);
  
  })();
});

The solution proposed in the book made use of an event handler. Since we don't need it when the page loads, I've used a simple self-executing function that calls itself and, at the same moment, increments the counter that points to the image we want to animate. This solution not only adds the effect we have chosen, but also allows us to apply the desired animation to any image in the wrapped set. You can see this demo 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.