How come my Raphael.js circle object is not getting its 'attr' changes animated & not getting the jQuery HandlerOut event object applied to it?

Question

I have created a #logo DIV that consists of a smaller #circle DIV & h1. The #circle acts as the DIV/canvas that my Raphael.js object, a circle, is rendered in. My goal was to make it so when a user hovers over the #logo DIV the Raphael.js circle and h1 will get animated but I ran into some problems.

• For some reason my Raphael.js circle object is not getting it's .attr() method animated during a jQuery .hover() handlerIn mouse event. The change just happens immediately.

• Additionally, during the handlerOut event, the Raphael.js circle does not get its .attr() method applied to it at all. It just keeps the .attr() attributes that were applied to it during the handerIn event

The code to my example of this issue is located here. You can click preview (top right) at that page to see the code in action.

Answer 1

$(c.node).animate({fill: "#666"}, 2000);

This is jQuery animation. Obviously jQuery has no idea about Raphaël objects. Use Raphaël animation instead:

c.animate({fill: "#666"}, 2000);

General advice don’t touch node property unless you really really know what you doing.