如何使用 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动画在鼠标进入动画位置时冻结，将动画进入和退出时间设置为相同的值：

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

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

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

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

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