JQuery 使用容器向上或向下滑动内容

Question

因此当使用JQuery slideUp 或slideDown 函数时，调用该函数的容器执行滑动，但内容保留放。

An Example

我希望内容随容器一起移动。如果向左或向右滑动，您可以看到 correct effect .

我对各种引擎进行了一些试验，试图找到解决方案(正如您可能从 jsfiddle 中看出的那样)，但没有成功。

如何让容器的内容在隐藏或显示时随着容器上下滑动？该解决方案必须适用于相互堆叠的可变数量的容器。

更新:

使用 Nando 的回答，我做了一个 working solution .

Answer 1

SlideUp 或 Slidedown 仅操纵元素的高度。如果您想移动该操作元素内的内容，您需要创建自定义动画。

运行一个动画到外部，它操纵高度和第二个动画到内部，它操纵 css top 属性。

<div class="outer">
  <div class="inner">

  </div>
</div>

否则你可以设置inner absolute的位置到outer的底部类似 this 的东西.

.outer {
    position:relative;
    height:200px;
    display:none;
    width:300px;
    overflow:hidden;
}

.outer > .inner {
    position:absolute;
    width:300px;
    height:200px;
    background-color:red;
    bottom:0px;
}

<div class="outer">
    <div class="inner">
        Content<br />Content<br />Content
    </div>
</div>