Javascript 在Raphael.js中，控制悬停元素的顺序

我有以下代码，并且。我试图让最上面的圆在最后设置动画时移到前面，即当用户从底部开始在鼠标上方移动时。在我看来，由于moboxonoff变量，这段代码应该可以工作，但它似乎没有任何效果

为清晰起见进行编辑：现在，底部圆始终位于顶部圆的顶部。我想改变这个顺序，这取决于控制鼠标区域的圆圈的鼠标移动顺序

xValues = [50, 50];
yValues = [100, 120];

var mouseoverStarts = [70, 90, 130],
    mouseoverEnds =  [90, 130, 150],
    mouseoverItems =  [[0], [0, 1], [1]];

var p0 = Raphael("paper", 500, 500);

var circles = []
for (i = 0; i < 2; i++) {
    circles[i] = p0.circle(xValues[i], yValues[i], 10);
    circles[i].attr({"fill": "#c00", stroke: "#888", "stroke-width":1.5});
    circles[i].id = "c"+i;
};

animate_on = function(num, ignoreindex, ignorearray) {
        if (moboxonoff[num] === 0) {
            p0.getById("c"+num).stop().animate({r: 30}, 480, "bounce");
            p0.getById("c"+num).toFront();
            moboxonoff[num] = 1
        };
};
animate_off = function(num, ignoreindex, ignorearray) {
        if (moboxonoff[num] == 1) {
            p0.getById("c"+num).stop().animate({r: 10}, 320, "bounce");
            moboxonoff[num] = 0
        };
};

moboxonoff = [];
for (i=0; i<2; i++) {
    moboxonoff[i] = 0;
};

debugopacity = 0.2; // set to 0 for final

moboxes = [];
for (i=0; i<mouseoverStarts.length; i++) {
    moboxes[i] = p0.rect(30, mouseoverStarts[i], 400, mouseoverEnds[i] - mouseoverStarts[i]);
    moboxes[i].attr({fill: "#00f", opacity: debugopacity});
    moboxes[i].id = "mob" + i;
    moboxes[i].hover(function () {
        j = parseInt(this.id.slice(3));
        mouseoverItems[j].forEach(animate_on);
        this.toFront();
        }, function () {
        mouseoverItems[j].forEach(animate_off);
        });
};

---

将中间矩形更改为前3个阵列中的最后一个位置：

var mouseoverStarts = [70, 130, 90],
    mouseoverEnds =  [90, 150, 130],
    mouseoverItems =  [[0], [1], [0, 1]];

删除动画函数上的toFront调用

只需在mouseover函数中添加一个if条件

if(j!=2){
  circles[j].toFront();
}

也可以直接从数组中调用圆，无需创建另一个ID

---

我会尝试通过更多的日志记录进一步减少代码，以隔离导致问题的代码位。按照代码中的逻辑流程进行操作是相当麻烦的；我想我可以通过检查mouseoverItems[j]==1的长度来概括这一点，而无需对2进行硬编码。