svg - 如何使用 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 位置冻结，请将动画进出​​时间设置为相同的值：

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

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

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

有关完整代码，请参见上面的小提琴。

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