Search this site


Metadata

Articles

Projects

Presentations

jQuery puffer

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.


6 responses to 'jQuery puffer'

Showing last 6 comments... (Click here to view all comments)

Olivier wrote at Tue Jul 31 08:52:04 2007...
Maybe you can help me. If you put the .Puff() on an image it works nicely. The image expands and fades. But if you put a <a> around the image to link somewhere and put the .Puff() on the <a> in stead of the image the effect doesn't work anymore. I've been breaking my head on this and can't find a solution.

On the Interface site the example uses a div with an image in it and anchor so it should be possible. Any idea?

Sean O wrote at Wed Aug 15 17:01:43 2007...
Doesn't seem to work in IE6?

ctraos wrote at Wed Dec 5 09:28:29 2007...
muchas gracias exelente post

橘佑京 wrote at Mon Jul 14 05:54:16 2008...
这里是正文

Pangareh Dopado wrote at Mon Feb 16 17:06:44 2009...
Hi!
could u plz help me with a jQueryUI issue?

i have this "puff" effect in this page:
http://pangasystem.net/leones/musicos2.html
(mouseover the girl on the right)

In firefox the effect is ok, but in IE (6,7 or evem 8) the "puffed" element is misplaced! IE just ignores it's CSS attributes :-(

Could u tel me if i'm doing something wrong?
Ty for listening.
[]'s

ddd wrote at Wed Mar 25 00:24:09 2009...
dddd


Leave a reply

You need javascript enabled to use this form. Anti-spam efforts ongoing. Also, if the comment doesn't show up, it's because the form expired. Go back and copy your comment, reload the form, and resubmit. Apologies if this is a hassle, I'm just playing with antispam methods right now. If this insists on not working, please email me about it.

Name (required)
E-mail (optional, if you want me to be able to email you back)
URL (also optional)
Comment: