Question

我正在为员工页面编写叠加效果，该页面将显示员工的照片，然后当您点击照片时文本向右展开，报价从照片下方向下滑动。如果照片不是第一张，则照片将滑到页面左侧，文本将从照片下方向右滑动。我似乎无法显示叠加层的背景颜色？我不确定我做错了什么。如果有人可以看看，让我知道我会非常感激。

以下是代码http://jsfiddle.net/BrentRansom/FLUPD/1/

CSS

#expand .bio-pic2 {
    position: absolute;
    top: 0;
    left: 0;
}

#expand {
    position: relative;
    width: 1000px;
    width: 0px;
    border: 1px solid black;
    display: none;
    background-color: #ffffff;
    z-index: 9999;
}

.bio-pic2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 323px;
}

.testimonial {
    position: absolute;
    top: 333px;
    left: 0;
    font-size: 15px;
}

.desc {
    position: absolute;
    top: 10px;
    left: 333px;
}

.bio-pic {
    float: left;
    cursor: pointer;
    z-index: 9998;
    margin: 0 5px 0 0;
}

HTML

    <div id="expand">
        <div class="bio-pic">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
            <div class="bio-nt">
                <h2>Name</h2>
                <h3>Position</h3>
            </div>
        </div>
       <div class="testimonial">
               A testimonial!
        </div>
    </div>

    <div class="desc">
        This is a paragraph of text.
    </div>
    <div class="bio-pic">
        <img src="http://www.brent-ransom.com/photo-img.jpg" />
    </div>

JS

<script>
    $(".bio-pic").click(function() {
     $('.bio-pic2').toggle("slow");

    var menu = $("#expand")
    if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
    } else {
        $(menu).show().animate({width: 500}, 1000);           
    }
});
</script>

Answer 1

不完全清楚你要做什么，但它是否与此类似？

首先为你想要显示为叠加层的#expand div添加一个高度，它当前显示没有任何高度。

#expand {
    position:absolute;
    width:1000px;
    border: 1px solid black;
    display: none;
    background-color:#ffffff;
    z-index:9999;
   height:323px;
}

当叠加层处于活动状态时，由于z-index的z-index高于实际的照片div，因此无法再次点击它以重置叠加层，而是可以在叠加层上绑定点击事件。

$(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand");
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
});

<强> Demo

可以获得动画背景变白并覆盖其他图像

1 个答案: