javascript - JQuery 动画 Z 索引？

Question

在我的页面中，我有不同的菜单项，它们会触发不同的相应图片。 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 可以工作，但似乎每个菜单项只能工作一次。如果您最初单击#andrew，它会将 pic1 带到顶部，如果您单击 #bugz，它会将 pic2 带到顶部。但是，如果您再次单击#andrew，它会在 .css(z-index) 更改之前和之后对代码进行动画处理，但不会更改 z-index 将 pic1 返回顶部。

我是 Javascript/JQuery 新手，所以如果我遗漏了一些明显的东西，请原谅我

Answer 1

您的选择器错误:$('.pic2 .pic3 .pic4 .pic5') 查找 .pic2 的后代。

您可以使用逗号而不是空格来分隔这些类，但使用 .siblings 更简单。方法替代:

$('.pic1').css('zindex',2).siblings().css('zindex',1);