我昨天发布了我正在处理的这个项目，并设法找到了一种方法来获得我需要的大部分预期效果。我可能会这样做很长的路要走，但这里有我所拥有的和我需要的。
这被设置为四个框，每个框都从不同的 z-index 级别（40、60、80 和 100）开始，#layer1 位于顶部。单击顶部框时，它会向后移动，而其他三个则向前移动。当单击其他三个框之一时，它会向前移动，而它前面的框会被推回。我有 .layer1、.layer2、.layer3 和 .layer4 函数运行它，它可以工作，但只有一次。之后，事情开始变得棘手。我尝试在 changePos 函数中按层 id 查找每个框的当前 z-index 值，然后创建一个数组来保存这些值，然后创建一个循环以将它们与我现有的索引值相对应，但是它不是正确的。
<script>
$(function() {
function changePos(){
var l1Index = $("#layer1").css('zIndex');
var l2Index = $("#layer2").css('zIndex');
var l3Index = $("#layer3").css('zIndex');
var l4Index = $("#layer4").css('zIndex');
var i;
var layerZindex = new Array();
layerZindex[1] = l1Index;
layerZindex[2] = l2Index;
layerZindex[3] = l3Index;
layerZindex[4] = l4Index;
for (i=1;i<4;i++)
{
if(layerZindex[i] == 40){
alert( "class layer" + i + "= 40, is now #layer4");
$("#layer4").removeClass();
$("#layer4").addClass("layer" + [i] + " zindex" + [i]);
}
else if(layerZindex[i] == 60){
alert( "layer" + i + "= 60, is now #layer3");
$("#layer3").removeClass();
$("#layer3").addClass("layer" + [i] + " zindex" + [i]);
}
else if(layerZindex[i] == 80){
alert( "layer" + i + "= 80, is now #layer2");
$("#layer2").removeClass();
$("#layer2").addClass("layer" + [i] + " zindex" + [i]);
}
else if(layerZindex[i] == 100){
alert( "layer" + i + "= 100, is now #layer1");
$("#layer1").removeClass();
$("#layer1").addClass("layer" + [i] + " zindex" + [i]);
}
}
}
$(".layer1").click(function() {
$(".layer1").animate({
opacity: "0.6",
left: "-120px",
top: "-90px",
zIndex: "40"
}, 850);
$(".layer2").animate({
opacity: "1",
left: "40px",
top: "30px",
zIndex: "100"
}, 550);
$(".layer3").animate({
opacity: "0.6",
left: "40px",
top: "30px",
zIndex: "80"
}, 700);
$(".layer4").animate({
opacity: "0.6",
left: "40px",
top: "30px",
zIndex: "60"
}, 850);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc2").animate({
opacity: "1"
}, 600);
changePos();
});
$(".layer2").click(function() {
$(".layer2").animate({
opacity: "1",
left: "40px",
top: "30px",
zIndex: "100"
}, 400);
$(".layer1").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "80"
}, 550);
$("Descriptions").animate({
opacity: "0"
}, 600);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc2").animate({
opacity: "1"
}, 600);
changePos();
});
$(".layer3").click(function() {
$(".layer3").animate({
opacity: "1",
left: "80px",
top: "60px",
zIndex: "100"
}, 400);
$(".layer1").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "80"
}, 400);
$(".layer2").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "60"
}, 550);
$("Descriptions").animate({
opacity: "0"
}, 600);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc3").animate({
opacity: "1"
}, 600);
changePos();
});
$(".layer4").click(function() {
$(".layer4").animate({
opacity: "1",
left: "120px",
top: "90px",
zIndex: "100"
}, 400);
$(".layer1").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "80"
}, 400);
$(".layer2").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "60"
}, 550);
$(".layer3").animate({
opacity: "0.6",
left: "-40px",
top: "-30px",
zIndex: "40"
}, 700);
$("Descriptions").animate({
opacity: "0"
}, 600);
$("#siteDesc1").animate({
opacity: "0"
}, 600);
$("#siteDesc4").animate({
opacity: "1"
}, 600);
changePos();
});
});
</script>
Here is my html
<div id="sites">
<div id="layer1" class="layer1 zindex1">
</div>
<div id="layer2" class="layer2 zindex2">
</div>
<div id="layer3" class="layer3 zindex3">
</div>
<div id="layer4" class="layer4 zindex4">
</div>
</div>
在 css 中，#layer id 当前驱动颜色，layer 类驱动大小、不透明度和定位类型（绝对），zindex 类使用边距驱动位置。
我的问题是我需要在一个循环上运行它，其中层类根据函数运行后以最高 z-index 结束的框重新发布。
另外，关于是否有更有效的方法来运行这种效果有什么意见吗？
: 并在这里更新我的进度，它是如此接近。我还没有弄清楚是什么导致了问题，但行为似乎执行了原始转换，没问题，但是当我运行 changePos 时被挂断了。它执行指定给顶部新框的功能，而不是重命名它。再次单击时，它会执行 .layer1 框的功能，然后在两者之间交替。changePos 函数似乎确实在重命名类，但在某个地方它变得混乱了。也许是 layerZindex 数组？我正在研究下一个。