3

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

1 回答 1

2

这是问题（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"});
}
于 2012-09-23T22:36:37.737 回答