私のページには、対応するさまざまな画像をトリガーするさまざまなメニュー項目があります。対応する画像を先頭にz-index
切り替えます。コードは次のとおりです。
$(document).ready(function(){
var doorOpen = false;
$("a[href=#andrew]").click(function() {
if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not
var duration = 1500;
} else {
var duration = 0;
}
$("#rightdoor,#leftdoor").animate(
{"marginLeft":"0px"},
{duration:duration,
complete:function() {
$('.pic2 .pic3 .pic4 .pic5').css('zIndex', 1); //puts wrong pics in back
$('.pic1').css('zIndex', 2); //brings right pic into view
$('#rightdoor').animate({ //opens doors again
marginLeft: "150px",
}, 1500);
$('#leftdoor').animate({
marginLeft: "-150px",
}, 1500);
}
}
);
doorOpen = true;
});
$("a[href=#bugz]").click(function() {
if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not
var duration = 1500;
} else {
var duration = 0;
}
$("#rightdoor,#leftdoor").animate(
{"marginLeft":"0px"},
{duration:duration,
complete:function() {
$('.pic1 .pic3 .pic4 .pic5').css('zIndex', 1); //puts wrong pics in back
$('.pic2').css('zIndex', 2); //brings right pic into view
$('#rightdoor').animate({ //opens doors again
marginLeft: "150px",
}, 1500);
$('#leftdoor').animate({
marginLeft: "-150px",
}, 1500);
}
}
);
doorOpen = true;
});
});
問題は、z-index
機能することですが、メニュー項目ごとに 1 回しかないようです。最初に をクリック#andrew
すると、pic1 が一番上に表示され、クリック#bugz
すると pic2 が一番上に表示されます。ただし、#andrew
もう一度クリックすると、変更前後のコードがアニメーション化されますが、.css(z-index)
変更されず、z-index
pic1 が先頭に戻ります。
私はJavascript/JQueryを初めて使用するので、明らかな何かが欠けている場合はご容赦ください