How would one go with creating a "flying debris" effect with jQuery?

Question

I am working on some animation and am using the jQuery library.

One of the assets' method is fly(), which means to fly away from the parent element had that parent just exploded. It should look like flying debris, i.e. it should fly up and away and then succumb to gravity and fall. Example.

Here is my method so far...

var parent = this.element.parent(),
    direction = this.element.position().left < parent.width() / 2 ? '-' : '+';

this.element.animate({
    left: direction + '=300',
    top: '-=200'
}, duration);

This obviously doesn't look at all like flying debris, as it just moves up and away. The direction variable determines which way the element should fly. Because each element is relatively positioned to its parent, elements on the left hand side move to the left and vice versa.

I'd don't want to implement a full fledged physics engine such as Box2D.

I know what my code should essentially do, which I believe is...

1. Fly the elment up (negative top) and in the direction set (negative or positive left), with some value decaying to simulate loss of horizontal movement due to wind resistance etc and loss of vertical movement due to gravity.
2. The force of gravity will have grown stronger at some stage than the upward force of the element from the explosion, in which case the element will need to fall.

I don't really know how to approach this problem. I was hoping I could leverage jQuery's animate(), but I don't know to incorporate a decaying value.

What would be the best way to create this effect?

Answer 1

(I will post this as an answer since that’s what it actually is.)

Do you just need a debris animation for eye candy, or does it have to be precisely calculated? I found that using random values can actually make it realistic. See http://jsfiddle.net/minitech/fSaGk