jQuery: puff effect

Scriptaculous provides a nice Puff() effect which consists of a simple increase in the element's dimension and an adjustment of their opacity to zero. We can actually mimic this effect with jQuery by creating a puff() plugin which accepts two options, factor and speed. The former is the value by which the dimensions of the element will be incremented, while the latter is the speed of the overall animation. Here's the jQuery code:

(function($) {

  $.fn.puff = function(options) {
  
    options = $.extend({
      factor: 3,
      speed: 100
    }, options);
  
    return this.each(function() {
  
      $(this).animate({
        width: $(this).width() * options.factor,
        height: $(this).height() * options.factor,
        opacity: 0
      }, options.speed);
  
    });
  };

})(jQuery);

An example:

$('#run').click(function(e) {
  
  $('#test').puff({factor: 4, speed: 200});
  
  e.preventDefault();
});

You can see a demo below.

Demo

Live demo