这是小提琴: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();
});
答案 0 :(得分:0)
AntoJurković得到了它,使用Raphael 2.1.2而不是Fiddle的内置2.1.0解决了这个问题。