Animation: jQuery or Raphael?

Question

I am building a page that will animate objects (image/shape/div) and float them around the screen. At times there may be a large number of objects floating and interacting.

A requirement is to have data associated with each object, as they will each have an id. So, if I click one object, it can grab that ID, then reference an array that holds the data about that object.

My debate is, if I should use the jQuery $.animate function or use Raphael. I know that SVG would be nice to use, but I am unsure if I can give each object and id, then bring up a div containing associated data onclick. Can clicking SVG elements reference DOM elements? How well does SVG work with dynamic text? I am also concerned about how much processing power the animation will take. Is there a better choice in this regard?

BTW, I am no talking about jQuery SVG here, just normal jQuery and DOM.

If anyone has any insight into this, or suggestions they would be greatly appreciated!

Answer 1

About speedy jQuery animations, you may be interested in this : http://code.zemanta.com/fry/ruleanimation/

Answer 2

Yes. All graphical objects are added as DOM objects.

A demo: http://raphaeljs.com/github/impact.html

simple demo code that draws a circle, assigns an id, and attaches an onclick event:

var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");
//assign circle id="lolcats"
circle.node.id="lolcats";
//onclick alert id
circle.node.onclick=function(){alert(this.id)};

If you need to do fancy vector drawing and manipulations, Raphael would be good. If not, you might as well just use what you know. Also, you can use both jQuery and Raphael at the same time.
From the sounds of it though, jQuery should be plenty enough for your needs.