1

我正在尝试使用 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;
}

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

4

2 回答 2

2

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

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

正如在这个小提琴中看到的

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

于 2013-08-05T15:36:16.667 回答
0

使用回调 on.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;
}
于 2013-08-05T15:37:55.557 回答