javascript - 位置绝对图像在动画过程中只显示一半

Question

我正在构建一个应该根据某些用户操作上下滑动的组件。该组件必须在顶部保存图像，该图像位于绝对位置，位于固定位置的包装器上。

一切都很好，但在我使用 jQuery 的上下滑动效果期间，只显示了图像的下半部分。动画结束后，图像将按预期显示。

我有一些 CSS 看起来像:

.wrapper {
  background: #fff;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 100px;
  display: none;
}

.picture {
  position: absolute;
  top: -40px;
  border-radius: 100%;
  left: 50%;
  transform: translateX(-50%);
}

我在这里做了一个 fiddle :https://jsfiddle.net/7sg3x6zn/

关于如何避免这种情况有什么想法吗？

Answer 1

正如其他人提到的，您需要覆盖在 slideDown() 和 slideUp() 的回调中设置的 overflow: hidden。

如果您像这样更改代码，您可以在不更改样式表的情况下做到这一点:

$(function() {

    $('#show').click(function(event) {
    event.preventDefault();
    $('.wrapper').slideDown().css('overflow','visible');
  });

  $('#hide').click(function(event) {
    event.preventDefault();
    $('.wrapper').slideUp().css('overflow','visible');
  });

});