Question

我有以下代码和here's a fiddle。我试图让最上面的圆圈在最后一次动画时前进到前面，即当用户从底部开始越过鼠标悬停区域时。在我看来，这个代码应该由于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);
        });
};

Answer 1

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

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

删除动画函数

上的toFront（）调用

只需在鼠标悬停功能中添加if条件

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

此外，您可以直接从数组中调用圆圈，无需创建其他ID。

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

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

1 个答案: