Javascript Raphael奇怪的闪烁发生在我第三次鼠标悬停

时间:2013-12-15 17:07:49

标签: javascript raphael

这是小提琴:http://jsfiddle.net/G2VKx/3/

当我将鼠标悬停在圆圈上时,文字很好地显示,但是如果我移除鼠标,鼠标悬停的第三个时间,与文本尺寸相匹配的框的高度和宽度开始不断增长,这就是奇怪的频闪效应。

var rsr = Raphael("holder", '1160', '1400');

xpos = 200;
ypos = 200;
rad = 50;

var rectext, el, txt;

cir = rsr.circle(xpos, ypos, rad);
cir.attr({
    fill: '#444',
        'fill-opacity': 1,
    stroke: 'none'
});

cir.hover(function () {
    this.animate({
        r: rad * 1.2
    }, 200);
    recttext = rsr.set();
    el = rsr.rect(0, 0, 0, 0, 3);
    el.attr({
        fill: '#fff'
    });
    txt = rsr.text(4, 10, "Title text").attr({
        "text-anchor": "start",
        fill: '#000000',
        "font-size": 12
    });
    recttext.push(el);
    recttext.push(txt);
    var att = {
        width: recttext.getBBox().width,
        height: recttext.getBBox().height
    };
    el.attr(att);
    recttext.translate(xpos - recttext.getBBox().width / 2, ypos - rad - 20);
}, function () {
    this.animate({
        r: rad
    }, 100);
    recttext.remove();
    el.remove();
    txt.remove();
        });

1 个答案:

答案 0 :(得分:0)

AntoJurković得到了它,使用Raphael 2.1.2而不是Fiddle的内置2.1.0解决了这个问题。