昨日取り組んでいるこのプロジェクトに投稿し、必要な効果のほとんどを得る方法を見つけることができました. 私はこれを長い道のりで行っているかもしれませんが、ここに私が持っているものと必要なものがあります.
これは 4 つのボックスとして設定され、それぞれが異なる z-index レベル (40、60、80、および 100) で始まり、#layer1 が一番上にあります。一番上のボックスをクリックすると、一番後ろに移動し、他の 3 つが前に出てきます。他の 3 つのボックスの 1 つをクリックすると、そのボックスが前方に移動し、その前にあるボックスが後方に移動します。これを実行している.layer1、.layer2、.layer3、および.layer4関数を持っていますが、機能しますが、1回だけです。その後、物事は毛むくじゃらになり始めます。changePos 関数で、各ボックスの現在の z-index 値をレイヤー ID で検索し、値を保持する配列を作成してから、それらをインデックス値に対応させるループを作成しようとしましたが、正しく出ていません。
<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 ボックスの機能が実行され、2 つのボックスが交互に切り替わります。changePos 関数はクラスの名前を変更しているように見えますが、どこかで混乱します。おそらく、layerZindex 配列によるものでしょうか? 私はそれを次に探しています。