如何用JQuery.hover和Raphael.animate动画菜单？

Question

看到这个小提琴：

http://jsfiddle.net/UfP3C/3/

每个列表项包括SVG元素。

我的目标是当用户悬停列表项目，拉斐尔动画发生（为其子svg元素）。

我遇到了以下问题：

• 缓慢移动鼠标时JQuery.hover正常工作。但是，当您快速滑过（和关闭）两个列表项（横向）时，svg元素通常会卡在“mouseenter”动画位置。

我试图找出如何让动画以达到预期效果：当在两个列表项迅速捕鼠，最终的结果是，SVG元素都在“鼠标离开”的位置。

上面的提琴演示了这个问题（在FireFox 5和Chrome 13中）。

Answer 1

我会建议使用拉斐尔的本地鼠标悬停和鼠标移开 他们迅速对这些事件 你也就能紧紧动画与关键字绑定回应“这个”

Answer 2

的解决方案请参见本琴：

• http://jsfiddle.net/UfP3C/4/

为了防止SVG动画从动画的mouseenter冻结现在的位置，设置动画中进出的时间是相同的值：

list_item.hover(function() { 
    my_rectangle.animate({ 
     y: 0 
    }, 400, 'bounce'); 

},function(){ 
    my_rectangle.animate({ 
     y: 200 
    }, 400, 'bounce'); 
}); 

在上面的代码中，动画时间是400同时设置动画的时间相同的值来解决这个问题。

请参阅上面的提琴完整的代码。

请注意，使用Raphael悬停功能而不是JQuery悬停功能（使用不同的动画时间）仍然显示相同的问题并具有相同的解决方案。