Question

悬停在我的圆圈上的效果就像一个魅力，除非你快速将鼠标悬停在（或过度）点上。然后绘制的第一条路径很快被删除，另一条元素保持可见，同时它们也会消失。

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

代码：

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

});

Answer 1

你在之前的动画完成之前就开始了新的动画。拉斐尔试图同时为同一元素上的不同终点位置制作动画。通过在触发新动画之前立即停止当前运行的动画（这将使其停止），可以很容易地解决这个问题。只需在致电stop()之前添加animate。

b.stop().animate(...

Raphael bug徘徊到快速

1 个答案: