Javascript jquery盲板和暴露子div后面？

我试图使用jquery动画选项实现滑动div的效果。我可以“滑动”父div，但在滑块后面显示div时遇到问题

我创建这个来显示我的问题

尝试取消对photoOptions div的注释。我正在尝试隐藏此div，以便仅当父div向上滑动时才会显示它

<div class="photoWrapper">
   <!-- <div class="photoOptions"> This is your data. </div>-->
   <div class="photoHolder">
     Image Here
   </div>
   <div class="photoMeta">More data here</div>
   <div class="photoCredits">
     <a href="#" class="trigger">Trigger</a>
   </div>
</div>

---

关于如何实现这一点，您有什么想法吗？

浏览器根据DOM中的位置渲染元素，如果一个元素在DOM中的另一个元素之前，则在它下面渲染

要更改此默认行为，应使用CSS规则

z-index

，在

div上定义较低的
z-index
。photoOptions

div将在其下方呈现

作为

---

还请注意，对于定位为绝对的元素，

z-index

值的处理可能会有所不同，因为它们不会在正常流中呈现。

使用

.blindToggle（）上的回调

可以达到这种效果，但您必须编辑CSS，使

.photoCredits

可见，并从

开始。photoOptions

隐藏：

$(document).ready(function () {
    $(".trigger").click(function () {
        $('.photoHolder').blindToggle('slow', function () {
            $(".photoOptions").show();
        });
    });
});

.photoOptions {
    padding-top: 50px;
    height: 266px;
    width: 200px;
    background: #eee;
    position:absolute;
    display:hidden;
}

.photoWrapper {
    width:200px;
    border: solid 1px #ddd;
}
.photoHolder {
    border: solid 1px #eee;
    width:200px;
    height:266px;
}
.photoOptions {
    padding-top: 50px;
    height: 266px;
    width: 200px;
    background: #eee;
    position:absolute;
}

$(document).ready(function () {
    $(".trigger").click(function () {
        $('.photoHolder').blindToggle('slow', function () {
            $(".photoOptions").show();
        });
    });
});

.photoOptions {
    padding-top: 50px;
    height: 266px;
    width: 200px;
    background: #eee;
    position:absolute;
    display:hidden;
}