Question

我想在页面中制作一半显示的div，就像一个页脚。当我点击它时，我希望它向上滑动。 div将包含有关它的信息。

我以某种方式实现了这一点，但我的问题是div并没有真正隐藏它只是改变位置。

您可以在此处找到演示：http://jsfiddle.net/8ZFMJ/394/

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": -430});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": "-200px"});
    }
});

Answer 1

.two必须绝对定位在必须相对定位的.container内。然后你只需用负值更改bottom，这将隐藏页脚。

<强> CSS：

html, body { height: 100%; }
.container {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.two {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height:250px;
    bottom: -200px;
    transition: bottom 1s;
}

<强> jQuery的：

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": "-200px"});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": 0});
    }
});

http://jsfiddle.net/8ZFMJ/398/

Answer 2

前一段时间我遇到过类似的问题，实际上我认为这是我的第一个stackoverflow问题。不幸的是收到的很差。

无论如何，问题是你只是只是改变了div的位置 - 这是.bottom的作用。我想你想要做的就是改变高度，参见this JSFiddle，我设法在状态之间切换div（还没有动画）。

它简单地使用css＆＃39; overflow-y: hidden;来隐藏div的内容，当它很小时，所有JS都会在高度之间切换：

if(clicked)
{
    $(".two").css("height", 10);
}
else
{
    $(".two").css("height", 250);
}
clicked = !clicked;

clicked = !clicked只是翻转变量的布尔状态。

现在，要添加动画，我们可以使用jQuery＆＃39; .animate并生成this beautiful Fiddle

基本上，我们之间必须做的就是使用animate而不是css。简单，真的。

<强> TL; DR
final JSFiddle

如何制作部分隐藏的div？

2 个答案: