jquery - 使用 animate() 滑动一个 div，隐藏它

Question

我正在尝试使用 animate() 对 div 进行动画处理，使其向上滑动。这很简单，问题是我希望它隐藏在其上方的切换按钮下方(具有更高的 z-index)并消失。换句话说，我不想看到 div 出现在按钮上方。如果其上方的按钮(或其他东西)延伸到屏幕边缘，这会很容易，但事实并非如此。

我尝试使用高度，但这会从下往上缩短 div，而不是相反。我的代码在代码笔上:http://codepen.io/solona/pen/NqPmpp

<div class='column'>
    <button class='toggle'>Hide Text</button>
    <div class='drawer'>
        <p>Content</p>
    </div>
</div>

.column {
    width: 50%;
    margin: 0 auto;
    background: lightgrey;
    padding: 1em;
}

.toggle {
    width: 100%;
    background: black;
    color: white;
    position: relative;
    z-index: 500;
}

.drawer {
  padding: 1em;
  background: pink;
  position: relative;
}

$(".toggle").click(function() {
    if ($(".drawer").hasClass('open')) {
        $(".drawer").animate({
            'bottom': $(".drawer").height()
        }, 400);
        $(this).html("Show Text");
        $(".drawer").removeClass('open');
    } else if (!$(".drawer").hasClass('open')) {
        $(".drawer").animate({
            'bottom': '0px'
        }, 400);
        $(this).html("Hide Text");
        $(".drawer").addClass('open');
    }
});

Answer 1

在 .drawer 周围放置一个包装器，将溢出设置为隐藏:

.bureau {overflow: hidden;}

<强> Demo

您需要调整填充等，以删除剩余空间。