如何使用JQuery.hover和Raphael.animate为菜单设置动画？

Question

看到这个小提琴：

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

每个列表项都包含一个SVG元素。

我的目标是当用户悬停列表项时，会发生Raphael动画（对于其子svg元素）。

我遇到以下问题：

• 慢慢移动鼠标时，JQuery.hover工作正常。但是，当你 快速鼠标跨越（和关闭）两个列表项（水平），svg元素经常卡在“mouseenter”动画位置。

我正在试图弄清楚如何使动画按预期工作：当快速鼠标移动到两个列表项时，最终结果是svg元素处于“mouseleave”位置。

上述小提示演示了该问题（在FireFox 5和Chrome 13中）。

Answer 1

我建议使用Raphael的原生mouseover和mouseout 他们迅速回应这些事件 您还可以使用关键字“this”

将动画紧密绑定

Answer 2

为解决方案看到这个小提琴：

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

要防止svg动画在mouseenter animate postion中冻结，请将animate in和out time设置为相同的值：

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

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

在上面的代码中，动画时间是400.将两个动画时间设置为相同的值可以解决问题。

请参阅上面的小提琴，了解完整代码。

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