The Interface elements plugin for jQuery is super slick. It has a puffer function I want to use. However, the act of 'puffing' makes the element disappear. I want to clone the element and puff the cloned version.

  function magicpuff() {
    $("img").mousedown(function() {
      pos = findPos(this)
      left = pos[0];
      top = pos[1];

      puffer = this.cloneNode(true);
      puffer.style.left = left + "px";
      puffer.style.top = top + "px";
      puffer.style.position = "absolute";
      $(document.body).append(puffer);
      $(puffer).Puff(1000, function() { $(puffer).remove() });

      return false;
    })
  }
  $(document).ready(magicpuff);

This code will duplicate the image clicked placing it directly on top of the old element. It then puffs the new element and removes it when the puff has completed. Simple enough.

What good is code without a fun little demo? View the puffer demo

I should note that it seems that the remove portion doesn't always remove the cloned object. This is especially noticable (though, not visually) when you activate puffing on more than one image at a time. You need somewhat fast hands to do this. Firefox's DOM inspector will show you the additional elements parented by the body tag.

This depends on findPos available from quirksmode, jQuery, and the forementioned Interface plugin.