Question

我正在尝试为div设置动画，以便使用animate（）向上滑动。这很容易，我要把它放在它上面的切换按钮（更高的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

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

Answer 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');
  }
});

使用animate（）滑动div，隐藏它

2 个答案: