使用 animate() 滑动 div，隐藏它答案

【问题标题】：Slide a div using animate(), hide it使用 animate() 滑动 div，隐藏它
【发布时间】：2015-07-17 03:23:26
【问题描述】：

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

我尝试使用高度，但这会从下往上缩短 div，而不是相反。我的代码在 Code Pen 上：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');
    }
});

【问题讨论】：

标签： jquery jquery-animate slide

【解决方案1】：

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

.bureau {overflow: hidden;}

Demo

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

【讨论】：

啊！我试过溢出：隐藏，但在错误的地方。谢谢！

【解决方案2】：

在 Codepen 上玩你的代码 .. 作为一个选项怎么办...

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

【讨论】：