Question

我正在尝试使用jquery animate选项实现滑动div的效果。我能够“滑动”父div，但是我在显示滑块后面的div时遇到了问题。

我已创建此jsfiddle以显示我的问题。

尝试取消注释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>

代码

jQuery.fn.blindToggle = function(speed, easing, callback) {
    var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
    return this.animate({
        marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
    }, speed, easing, callback);
};

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

当前的CSS：

.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;
}

有关如何实现这一目标的任何想法？

Answer 1

浏览器根据DOM中的位置呈现元素，如果元素位于dom中的另一个元素之前，则会在其下呈现。

要更改此默认行为，您应该使用CSS规则z-index，通过在z-index div上定义较低的.photoOptions，它将在其下方呈现。

为seen in this fiddle

另请注意，z-index值对于绝对定位的元素可能会有不同的处理方式，因为它们不会在正常流中呈现。

Answer 2

使用.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;
}

jquery盲目和揭露儿童div？

2 个答案: