我有以下代码,这里有一个小提琴。我试图让最上面的圆圈在最后动画时移到前面,即当用户从底部开始越过鼠标悬停区域时。在我的脑海中,由于 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(( 调用
只需在鼠标悬停功能中添加一个 if 条件
if(j!=2){
circles[j].toFront();
}
您也可以直接从数组中调用圆圈,而无需创建另一个 ID。
http://jsfiddle.net/crockz/u2zL29jw/