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

看这把小提琴：

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

我的目标是，当用户悬停在列表项上时，Raphael动画就会出现（对于其子svg元素）

我有以下问题：

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

我试图找出如何让动画按预期工作：当在两个列表项之间快速鼠标移动时，最终结果是svg元素处于“mouseleave”位置

---

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

我建议使用Raphael的原生mouseover和mouseout 他们对这些事件反应迅速

---

您还可以使用关键字“this”将动画紧密绑定。

有关解决方案，请参见此小提琴：

要防止svg动画在“鼠标输入动画”位置冻结，请将“动画输入”和“动画输出”时间设置为相同的值：

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

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

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

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

---

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

您是正确的，我只是在svg中添加了文本，而不是单独的html文本。但是，同样的问题仍然存在。解决方案是，必须将“动画输入”和“动画输出”时间设置为相同的值。