快速悬停时出现拉斐尔错误答案

【问题标题】：Raphael bug when hovering to fast快速悬停时出现拉斐尔错误
【发布时间】：2014-08-06 12:41:32
【问题描述】：

除非您将鼠标悬停在圆点上方（或上方）以快速移动，否则悬停在我的圈子上就像一种魅力。然后绘制的第一条路径很快就会被擦除，而另一个元素保持可见，而它们也应该消失。

有人知道如何解决这个问题吗？

还有代码：

var paper = Raphael(10, 50, 600, 300);
var circle1 = paper.circle(200, 200, 8);
var anim = Raphael.animation({
    fill: "#0099ff",
    stroke: "#0099ff",
    "stroke-width": 12,
    "stroke-opacity": 0.5
}, 1000).repeat(Infinity);

var a = paper.path("M200 200");
var b = paper.path("M180 180");
var rect1 = paper.rect(30, 180, 150, 130);
rect1.attr({
    stroke: "none",
    fill: "#ccc",
    "fill-opacity": 0.5
});
rect1.hide();

var attr = {
    fill: "#454545",
    "text-anchor": "start",
    "font-size": 16
};
var text1 = paper.text(40, 230, "Lorem ipsum dolor \nsit amet, consectetur \nadipiscing elit. \nMauris quis aliquam \ndiam.").attr(attr);
text1.hide();

circle1.animate(anim);

hoverArea1 = paper.circle(200, 200, 10);
hoverArea1.attr({
    stroke: "none",
    fill: "#f00",
        "fill-opacity": 0
});

hoverArea1.hover(function () {
    hoverArea1.node.style.cursor = 'pointer';
    a.animate({
        path: "M200 200 L180 180"
    }, 100, function () {
        b.animate({
            path: "M180 180 L30 180"
        }, 500, function () {
            rect1.show();
            text1.show();
        });
    });
}, function () {
    text1.hide();
    rect1.hide();
    b.animate({
        path: "M180 180 L180 180"
    }, 500, function () {
        a.animate({
            path: "M200 200 L200 200"
        }, 100);
    });

});

【问题讨论】：

标签： javascript hover raphael

【解决方案1】：

您在之前的动画完成之前触发了新的动画。 Raphael 正在尝试同时为同一元素上的不同结束位置设置动画。这很容易通过在触发新动画之前立即停止当前正在运行的动画来解决（这将停止它）。只需在拨打animate 之前添加stop()。

b.stop().animate(...

【讨论】：