0

私のページには、対応するさまざまな画像をトリガーするさまざまなメニュー項目があります。対応する画像を先頭に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-indexpic1 が先頭に戻ります。

私はJavascript/JQueryを初めて使用するので、明らかな何かが欠けている場合はご容赦ください

4

1 に答える 1

5

セレクターが間違っています:$('.pic2 .pic3 .pic4 .pic5')の子孫を探し.pic2ます。

スペースの代わりにコンマを使用してこれらのクラスを区切ることもできますが、.siblings代わりにメソッドを使用する方が簡単です:

$('.pic1').css('zindex',2).siblings().css('zindex',1);
于 2013-01-15T18:55:07.807 に答える