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()
meth开发者_如何学编程od 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 thehanderIn
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.
$(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.
精彩评论