jQuery puffer
Posted Mon, 25 Sep 2006
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.
On the Interface site the example uses a div with an image in it and anchor so it should be possible. Any idea?