如何使用jQuery从顶部滑下这个div？

Question

所以我有一个显示块父级的2个div子节点。我想让div＃2（绿色）位于div＃1（红色）之上。有了“在顶部”，我不是在谈论z-index，我说的是字面意思在另一方面。然后我想知道是否有办法让div＃2 slideDown（）

据我测试，jQuery slideDown（）或slideUp（）的工作方式不同。 在我制作的演示中，当我运行时

$('.item-1').slideUp();

项目2向上滑动而不是项目1，为什么？我很困惑。

任何提示都将不胜感激，

提前致谢。

window.slide = function() {
	$('.item-1').slideUp();
}

.items-container {
  height: 400px;
  width: 240px;
  background-color: #c3c3c3;
  display: block;
  /* overflow: hidden; */
}

.item {
  height: 100%;
  width: 240px;
  position: relative;
  font-size: 30px;
  text-align: center;
  vertical-alignment: middle;
}

.item-1 {
  background-color: red;
}

.item-2 {
  float: left;
  position: relative;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slide()">
Click me!
</button>

<div class="items-container">
  <div class="item item-1">
    1
  </div>
  <div class="item item-2">
    2
  </div>
</div>

Answer 1

.slideUp()通过更改元素的高度来工作。随着该元素变短，以下元素将向上移动。

如文档中所示：

  

.slideUp()方法可以设置匹配元素的高度。这会导致页面的下半部分向上滑动，似乎隐藏了这些项目。

Answer 2

在你的小提琴中，item1按照预期和定义by the doc：

向上滑动

  

描述：用滑动动作隐藏匹配的元素。

所以你的div会向上滑动并消失，而item2不会移动＆＃34;只是在隐藏了item1之后填充了DOM中的空间。

Answer 3

jQuery的slideUp()和slideDown()方法为匹配元素的高度设置动画，而不是您想要的位置：http://api.jquery.com/slideUp/。

您似乎想要的是translate div它，以便它移动到第一个之上。

http://www.w3schools.com/css/css3_2dtransforms.asp

＆＃13;

＆＃13;

window.slideUp = function() {
	$('.item-2').addClass('slideUp');
}

window.slideDown = function() {
	$('.item-2').removeClass('slideUp');
}

＆＃13;

.items-container {
  height: 100px;
  width: 240px;
  background-color: #c3c3c3;
  display: block;
  /* overflow: hidden; */
}

.item {
  height: 100%;
  width: 240px;
  position: relative;
  font-size: 30px;
  text-align: center;
  vertical-alignment: middle;
}

.item-1 {
  background-color: red;
}

.item-2 {
  position: relative;
  transition: transform linear 1s;
  background-color: green;
}

.slideUp
{
  transform: translate(0,-100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slideUp()">
SlideUp!
</button>
<button onclick="slideDown()">
SlideDown!
</button>

<div class="items-container">
  <div class="item item-1">
    1
  </div>
  <div class="item item-2">
    2
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;