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

Posted 2023-05-08

【中文标题】使用 animate() 滑动 div，隐藏它

【英文标题】：Slide a div using animate(), hide it

【发布时间】：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');
    
);

【参考方案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');
  
);