Question

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

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"});
}

Raphael Hover Bug？

1 个答案: