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>

否则，您可以将内部绝对位置设置为外部底部类似于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>

Answer 2

将所有内容包装在一个div中并将其设置为position:absolute.

single_alert_update("<div style='position:absolute; bottom:0px; width:55%; text-align:right;'>Notice " + (++count)+"</div>");

然后将#global-alerts .alert的位置设置为相对，这样就可以了。

Nando的答案非常好，这只是你代码的一个例子。

Fiddle

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

2 个答案: