問題描述
raphael newbie：彈窗背景在跳躍 (raphael newbie: popup background is jumping)
I tried the following code ‑
var fin = function () {
// this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
this.flag = r.popup(this.bar.x, 280, this.bar.y || "0").insertBefore(this);
};
var fout = function () {
this.flag.animate({opacity: 0}, 200, function () {this.remove();});
};
. . .
r.barchart(10, 10, 900, 300, [[55, 20, 13, 32]], 0, {type: "sharp"}).hover(fin, fout);
It works well in raphael sample page ‑ http://g.raphaeljs.com/barchart2.html
but in my page the tooltip blackbackground is "jumping" up each mouse over. [the tooltip text stays at the correct x,y]
Do I use the wrong libraries? How do I fix it?
‑‑‑‑‑
參考解法
方法 1:
That's puzzling. I don't know exactly why that's happening, but there's a better solution: Create the popup once for each bar and then show or hide it on hoverin/hoverout.
var r = Raphael(0, 0, 800, 500);
fin = function () {
if (!this.hasOwnProperty("flag")) {
this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
}
this.flag.attr("opacity", 1);
},
fout = function () {
this.flag.animate({opacity: 0}, 300);
};
var bars = r.barchart(10, 10, 900, 300, [[55, 20, 13, 32]], 0, {type: "sharp"}).hover(fin, fout);
jsFiddle
方法 2:
The problem seems to be fixed with Raphael 2.1.2
(by Atara、Chris Wilson、Ahtenus)