javascript - 拉斐尔悬停错误？

Question

我用 Raphael JS 编写了一个图形小部件。数据取自数据库并绘制在 Canvas 上。当我尝试为数据点创建工具提示时出现问题。工具提示淡入，但淡出时出现错误。有时会淡出，有时不会(鼠标快速移动时似乎不会淡出)。应该注意的是，当鼠标悬停在数据点上时，数据点会增长。任何改进我的代码的帮助都会有所帮助。谢谢。代码如下:

circle2[<?php echo $i?>].hover(function () {
circle2[<?php echo $i?>].attr({"stroke": "#000"});
circle2[<?php echo $i?>].attr({"r": "8"});
rect.toFront();
text.toFront();
rect.attr({"x":30+50*<?php echo $i ?>,"y":220-250*<?php echo $time_value[$i]/100000;?>});
text.attr({"text":"<?php echo $date[$i]?>\nValue: $<?php echo $time_value[$i]?>\nInvested: $<?php echo $time_value[$i]?>","y":250-250*<?php echo $time_value[$i]/100000;?>,"x":33+50*<?php echo $i ?>});
rect.animate({"opacity":0.8},500);
text.animate({"opacity":1.0},500);
},
    function () {
         rect.attr({"opacity":0});
         text.attr({"opacity":0});
         circle2[<?php echo $i?>].attr({"stroke": "none"});
         circle2[<?php echo $i?>].attr({"r": "5"});
    }
);

Answer 1

这就是问题所在(95% 的确定性):如果发生快速悬停，并且悬停的持续时间小于悬停开始动画的持续时间(在本例中为 500 毫秒)，您的悬停功能将在动画结束之前将元素不透明度设置为 0，并将背景和文本的不透明度分别设置回 0.8 和 1.0。

解决方案是在悬停周期结束时停止正在进行的动画。您应该能够按如下方式更新悬停处理程序:

... 
function () {
    rect.stop().attr({"opacity":0});
    text.stop().attr({"opacity":0});
    circle2[<?php echo $i?>].attr({"stroke": "none"});
    circle2[<?php echo $i?>].attr({"r": "5"});
}