这是早期线程的延续，Neil-感谢Neil回答了这个问题！我可能应该在第一个问题中包括这个，但我想简化一些事情......
我需要的另一个功能是拥有一个“对话框”，其中包含一个标题和一些文本，当它出现时，它会在圆圈旁边打开和关闭动画。在Neil的帮助之前，我在早期版本中实现了这一点。我花了一些时间尝试将它集成到新的和改进的代码中并获得一些意想不到的结果。例如，如果我翻转右边的第一个圆圈，它可以正常工作，但是，如果我尝试翻转中间和右侧圆圈，它们就不起作用。奇怪的是，如果我刷新并开始在右边的圆圈，每个都会在从右到左移动时工作，直到我到达左边的那个，然后中间和右边不起作用 - 但是左边的一个继续工作。此外，如果我点击左侧圆圈，它会按预期工作，但其他人不起作用。相反，如果我先点击右边的那个，然后再向中间点击，那么中间点击就可以了，但是右边的点击不会。
我正在寻找的行为是每个圆圈，使用圆形旁边的矩形动画，在鼠标悬停时使用动态文本淡入，并使动画文字向下移动，矩形文本在mouseout上淡出。带有文本的矩形应该在点击时淡出，如果用户鼠标点击了单击的圆圈，则不会再次淡出（我猜也需要删除鼠标悬停事件）。需要做的另一件事是，矩形需要出现在圆圈上的不同位置，这取决于地图上的位置 - 这样它就不会从地图上掉下来。我在早期版本中成功完成了这项工作，但为了更清晰，我们已将其留在上一篇文章中。我会把它包含在这里，以便你了解我正在做的事情。
我的猜测是我需要创建一个矩形/文本组件的set（）并将其与圆圈一起放在另一个set（）中？
对此的任何帮助都非常感谢！感谢
// JavaScript Document
var arr = [
[50, 50, "this", "Is text that is to be the abstract"],
[100, 50, "that", "Is text that I hope is here"],
[150, 50, "another thing", "Even more text"]
];
var currRect;
var currTitleTxt;
var currTeaseTxt;
var prevItem;
doMe();
function doMe() {
var paper = new Raphael(document.getElementById('canvas_container'), 696, 348);
for (var i = 0; i < arr.length; i++) {
paper.circle(arr[i][0], arr[i][1], 6).attr({
fill: '#fff',
'fill-opacity': 0.5
}).data("i", [arr[i][0], arr[i][1], arr[i][2], arr[i][3]]).click(function () {
this.unmouseout();
}).click(function () {
if (this.data('selected') != 'true') {
if (prevItem != null) {
prevItem.data('selected', '');
handleOutState(prevItem);
}
prevItem = this.data('selected', 'true');
currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
currTitleTxt.animate({"fill-opacity":0}, 150 );
currTeaseTxt.animate({"fill-opacity":0}, 150 );
}
}).mouseover(function () {
handleOverState(this);
if(this.data("i")[0] <= 350){ //this is where I test for the position on the map
paper.setStart(); //create rectangle and text set
currRect =paper.rect(17, -20, 265,90).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(25, -8, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt = paper.text(25, 30).attr({"text-anchor":"start",fill:'#eeeeee',"font-size": 11, "font-weight":"bold","fill-opacity":0});
var maxWidth = 250;
var content = this.data("i")[3];
var words = content.split(" ");
var tempText = ""; //since Raphael doesn't have native word wrap, I break the line manually
for (var i=0; i<words.length; i++) {
currTeaseTxt.attr("text", tempText + " " + words[i]);
if (currTeaseTxt.getBBox().width > maxWidth) {
tempText += "\n" + words[i];
} else {
tempText += " " + words[i];
}
}
currTeaseTxt.attr("text", tempText.substring(1));
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
}else if(this.data("i")[0] >= 351){ //this is where I test for the position on the map
paper.setStart();
currRect = paper.rect(-280, -20, 250,50).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(-270, -10, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt =paper.text(-270, 5, this.data("i")[3]).attr({"text-anchor":"start",fill:'#cccccc',"font-size": 12, "font-weight":"bold","fill-opacity":0});
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
}
}).mouseout(function () {
currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
currTitleTxt.animate({"fill-opacity":0}, 150 );
currTeaseTxt.animate({"fill-opacity":0}, 150 );
if (this.data('selected') != 'true') handleOutState(this);
});
}
function handleOverState(el) {
el.animate({
r: 8
}, 250).animate({
"fill-opacity": 1
}, 150);
}
function handleOutState(el) {
el.animate({
r: 6
}, 250).animate({
"fill-opacity": 0.5
}, 150);
}
}