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.