将新的div滑到另一个div下方

Question

我想要一个新的/隐藏的div从另一个div下方向下滑动。 我的想法是我有一个输入字段和一个添加按钮。 单击添加按钮后，将显示更多表单元素（滑出下方）。 对于我的问题，其形式部分并不重要，因此我只将第一个div作为文本“悬停以显示新的div”，将新的slide-down-div变为一些随机文本。

到目前为止，我有这个html：

<div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>    

而这个CSS：

.one {
    position: relative;
    top: 100px;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: absolute;
    top: 60px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
    }

.one:hover + .two {
    top: 100px;
}

参见jsfiddle： http : //jsfiddle.net/8ZFMJ/

这种作品。 但是第二个div高于第一个div，因此它在第一个div上方可见，我不希望这样。 如何使它按照我想要的方式滑下第一格？ 如果我在此过程中最终没有第一个div必须知道第一个div的位置，那也将很好...

Answer 1

将两个div放到一个容器中（两个div的高度合计。），然后将div放到容器的顶部。 然后将容器设置为overflow:hidden;

像这样的东西： http : //jsfiddle.net/8ZFMJ/2/

问候

Answer 2

（已编辑为使用css3动画而不是jQuery的slideDown() ）

此解决方案可以在悬停元素下方没有额外的空白的情况下工作。 另外，您不必指定包含元素的高度。

我们必须在此处为容器的max-height height （而非height设置动画（请参见如何将height：0;转换为height：auto;使用CSS？ ）。 请参阅此JsFiddle以获取工作版本，该基础元素在悬停时显示，在单击时关闭。

这种方法的缺点是，您必须为滑动元素指定max-height属性，以使该属性的值大于该元素的内容。 由于动画在元素的最大高度上工作，因此动画也不能过大（请参见下面的示例）。

示例 ：打开的max-height设置为500px ，实际内容高度为100px ，过渡动画持续5秒钟。 开头动画的第一秒用于显示内容，而接下来的四秒对用户不可见。 请注意，这在两种方式下均有效，因此，结束动画在单击该元素后四秒钟开始。

更多javascript :)

通过使用jQuery的函数，确实有可能获得内部元素所需的高度。 下面的示例演示了如何将css3动画与jQuery配合使用来避免上述问题。

关键是将下滑元素的元素包装到div并在悬停时计算其所需的高度。 见正在工作的小提琴手

var contentHeight = $('.two').children('div').outerHeight();
$('.two').css('max-height', contentHeight + 'px')

上述解决方案可能会解决您的所有需求。 但是，尚不清楚您愿意使用javascript的程度。