javascript - 如何在 jquery 中向上滑动带有移动效果的容器？

Question

这是我的 fiddle :

https://jsfiddle.net/XiangXu/rf6tdw4s/17/

<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
  <div class="innerTop" id="top">Slide from top</div>
  <div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

.slide {
  position: relative;
  height: 100px;
  background-color: yellow;
}
.slide .innerTop {
  position: absolute;
  top: 0px;
}
.slide .innerBottom {
    position: absolute;
  bottom: 0px;
}

$("#slide").click(function() {
  $("#top").slideToggle();
  $("#bottom").slideToggle();
});

底部的没问题，它会从容器中向下移动。但是最上面的那个好像有什么东西在从下往上抹去，而不是移动!

我如何将它从容器中移出，就像底部的一样？

Answer 1

您不能使用 jQuery 的 .slideUp() 和 .slideDown() 函数来实现，因为它会为元素的 height 设置动画。但是，您可以在 click 上添加 class 并使用 css transform 为它们设置样式。

$("#slide").click(function() {
  $("#top, #bottom").toggleClass('hidden');
});

.slide {
  position: relative;
  height: 100px;
  background-color: yellow;
  overflow: hidden;
}

.slide .innerTop,
.slide .innerBottom {
  transition: transform 0.25s linear;
  transform: translateY(0);
}

.slide .innerTop {
  position: absolute;
  top: 0px;
}
.slide .innerTop.hidden {
  transform: translateY(-100%);
}

.slide .innerBottom {
  position: absolute;
  bottom: 0px;
}
.slide .innerBottom.hidden {
  transform: translateY(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
  <div class="innerTop" id="top">Slide from top</div>
  <div class="innerBottom" id="bottom">Slide from bottom</div>
</div>