How to animate a menu with JQuery.hover plus Raphael.animate? - svg

Question

See this fiddle:
http://jsfiddle.net/UfP3C/3/
Each list item contains an SVG element.
My goal is when the user hovers the list items, the Raphael animation occurs (for its child svg element).
I'm having the following issue:
JQuery.hover works fine when moving the mouse slowly. But, when you
quickly mouse across (and off) both list items (horizontally), the svg elements often get stuck in the "mouseenter" animate position.
I'm trying to figure out how to get the animation to work as expected: When quickly mousing across both list items, the end result is that the svg elements are in the "mouseleave" position.
The above fiddle demonstrates the issue (in FireFox 5 and Chrome 13).

Answer 1

I would recommend using Raphael's native mouseover and mouseout
They rapidly respond to these events
You will also be able to tightly bind the animation with the keyword "this"

Answer 2

See this fiddle for the solution:
http://jsfiddle.net/UfP3C/4/
To prevent the svg animation from freezing in the mouseenter animate postion, set the animate in and out time to be the same value:
list_item.hover(function() {
my_rectangle.animate({
y: 0
}, 400, 'bounce');
},function(){
my_rectangle.animate({
y: 200
}, 400, 'bounce');
});
In the above code, the animate time is 400. Setting both animate times to the same value solves the issue.
See the above fiddle for the full code.
Note that using the Raphael hover function instead of the JQuery hover function (with different animate times) still shows the same issue and has the same solution.