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

Question

I have the following code, and here's a fiddle . I'm trying to get the topmost circle to go to the front when it's animated last, ie when the user goes over the mouseover areas starting from the bottom. In my head, this code should work due to the moboxonoff variable, but it doesn't seem to have any effect.

Edit for clarity: right now, the bottom circle is always on top of the top circle. I'd like this order to change depending on what order the circles' controlling mouseover areas are moused over.

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);
        });
};

Answer 1

Change the middle rectangle to the last position in the first 3 arrays:

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

Remove the toFront() call on the animate functions

And just add a if condition in the mouseover function

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

Also you can call the circles from the array directly, no need of creating another ID.

http://jsfiddle.net/crockz/u2zL29jw/