In the second example, the poof was appended to the ‘drag me’ box and so is contained inside it. I’m not sure why IE is the only browser that clips it, but you might try playing with the overflow CSS property of .box to fix the problem. Either that or changing the z-index property of .poof.

As for displaying the poof only when the box is released outside of it’s container, I would look at making the container a droppable. jQuery UI’s droppable plugin includes an ‘out’ event that is triggered when something is dragged outside of it. You might be able to coordinate the out event on the container with the drop event on the box to get the result you want. I haven’t tried this approach though, so this is just a shot in the dark.

In your last two examples, the poof animation is triggered regardless of where you drag the boxes — is there a ways to trigger the poofs only when the boxes are dragged and released outside of the container?

Thanks!

Here’s a couple of options that might help get you started. The first example is with the poof animation turned into a jQuery plugin. It works well enough for the example page, but probably doesn’t provide enough control for use in a real web application — the animation will run when the mouseup event occurs.

The second example is a little more like what you are asking for. The example.js script appends the poof div to each box and when the box is dragged and released the animation inside that box is displayed. If you wanted to make running the animation conditional, you could add an if statement right after this line:
stop: function() {
and wrap it around the animation code.

Hope that gives you enough to work with.

I was trying to turn this into a plugin and ran into the same problem. In order to get the x/y coordinates of the cursor for placing the animation, a mouse event has to occur.

It seems like there should be an easy way around this, but I haven’t run into it yet.

$(‘.poof’)
.animate({backgroundPosition:”0px -32px”}, 80)
.animate({backgroundPosition:”0px -64px”}, 80)
.animate({backgroundPosition:”0px -96px”}, 80)
.animate({backgroundPosition:”0px -128px”}, 80)
.animate({backgroundPosition:”0px -160px”}, 80);

It’s certainly more readable and does exactly the same thing?

Since easing between two points is actually the expected behavior for animate(), I wonder if this technique will break with a future jQuery release.