2

我想让一个新的/隐藏的 div 从另一个 div 下方向下滑动。这个想法是我有一个输入字段和一个添加按钮。单击添加按钮时，会显示更多表单元素（从下方滑出）。这个表单部分对我的问题并不重要，所以我只是让第一个 div 是文本“悬停我以显示新 div”，而新的向下滑动 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 必须知道第一个 div 的位置，那也很好......

4

2 回答 2

4

将两个 div 放在一个容器中（将两个 div 的高度相加。），并将您的 div 放在容器的最顶部。然后将容器设置为overflow:hidden;

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

问候

于 2013-09-06T06:38:44.813 回答
3

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

此解决方案无需悬停元素下方的额外空白即可工作。此外，您不必指定包含元素的高度。

我们必须在max-height此处为容器设置动画，而不是height（请参阅如何将高度：0；转换为高度：自动；使用 CSS？）。请参阅此 JsFiddle以获取工作版本，其中基础元素在悬停时显示并在单击时关闭。

这种方法的缺点是您必须为max-height滑动元素指定一个属性，以便该属性的值大于元素的内容。由于动画在元素的最大高度上工作，它也不能大得离谱（见下面的例子）。

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

更多的 javascript :)

确实可以通过使用 jQuery 的函数来获得内部元素所需的高度。下面的示例演示了使用 jQuery 使用 css3 动画来避免上述问题。

关键是将向下滑动元素的元素包裹到 adiv并计算其悬停时所需的高度。查看工作中的 Js Fiddle

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

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

于 2013-09-06T06:40:48.657 回答