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

Question

所以我有两个显示块父级的div子。我想把div #2 (绿色)放在div #1 (红色)的顶部。“在上面”我不是在说z索引，我指的是从字面上说是在另一个之上。然后我想知道是否有一种方法可以使div #2 slideDown()

就我测试而言，jQuery slideDown()或slideUp()的工作方式不同。在我做的演示中，当我运行

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

第二项是上升而不是第一项，为什么呢？我有点糊涂了。

任何暗示都将不胜感激，

提前谢谢。

​

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

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

您似乎想要的是translate div it，以便它在第一个移动的基础上移动。

2dtransforms.asp

​

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

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

.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%);
}

<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>

​

Answer 2

.slideUp()通过更改元素的高度来工作。当该元素变得更短时，下面的元素将在页面上移动。

如文件所示：

.slideUp()方法动画匹配元素的高度。这会导致页面的较低部分向上滑动，似乎隐藏了项目。

Answer 3

在您的小提琴中，item1按预期和定义的被医生滑行：

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

这样您的div就会向上滑动并消失，item2不会“移动”，只会在item1隐藏之后填充DOM中的空间。