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

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.

Answer 2

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

Answer 3

Hello Nic,

I have built one of my examples on floating objects, but these are 3D none of your 2d rubbish phaa!

Raphael is especially exciting these days because it fully supports the SVG specification as regards paths.

Playing with the objects you can see that each one of them can be referenced with the controls.

They can also be made to display data wherever you click on them.

Now because the below URL takes you to a 3D screen you can imagine building a virtual room with virtual objects "spilling" data as you click them.

http://www.irunmywebsite.com/raphael/xyz%5F3d%5FPlatonic%5Flive.html