Question

我有一个div，我希望能够点击并缩小到页面的前10％左右。我有类似的代码，其中一个DIV应该涵盖所有内容，然后第二个DIV将具有该页面的内容：

<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>

<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>

这是我想要做的部分例子：

JSFiddle

这个问题是slideUp（）函数似乎完全隐藏了＆＃34;封面＆＃34; DIV而不是将它缩小到它的一部分尺寸。我遇到的另一个问题是背景不能与DIV一起缩放。我希望背景图像在封面DIV中缩小到合理的尺寸。这可能吗？在我的JSFiddle示例中，空格应该有＆＃34;覆盖＆＃34; DIV，以及较小版本的背景图片。

Answer 1

jQuery slideToggle();实际上应该完全隐藏或显示元素，因为您不应该隐藏或显示您隐藏/显示的元素。

因此，为了解决您的问题，我创建了一个额外的div，它将隐藏或显示元素，使其仅显示隐藏元素的外观。你可以在这里找到小提琴：

JSFiddle

我也为你缩放了背景。

Answer 2

我会使用jquery的animate()来替换background-attachment:fixed和background-size: 8em;

根据div { "height": "30%","background-size": "6em" }

的大小调整此部分

$(function () {
    $('#cover').click(function () {
        $(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
            $(this).next().show();
        });
    });
});

* {
    margin: 0px;
    padding: 0px;
}
html {
    width:100%;
    height:100%;
}
.hide {
    display: none
}
.show {
}
#cover {
    background-color: black;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    position:fixed;
    background-size: 8em;
    margin: 0 auto; 
    background-image: url('http://i.stack.imgur.com/JVX13.png');
    background-repeat:no-repeat;
    background-position:center; 
}


#content {
    background-color: #CCCCFF;
    padding: 5px 10px;
    width:100%;
    height: 100%;
    top:30%;
    left:0;
    position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>

我如何制作一个滑动显示页面而不完全隐藏它的div？

2 个答案: