javascript - 如何制作部分隐藏的div？

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

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

无论如何，目前的问题是您只是改变了div 的位置——这就是.bottom 所做的。我想你想做的是改变高度，见this JSFiddle我设法在状态之间切换 div(还没有动画)。

它简单地使用了 css 的 overflow-y: hidden;在 div 很小的时候隐藏它的内容，所有 JS 所做的就是在高度之间切换:

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

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

现在，要添加动画，我们可以使用 jQuery 的 .animate并生产this beautiful Fiddle

基本上，我们所要做的就是使用 animate 而不是 css。真的很简单。

长话短说
final JSFiddle