將新的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的程度。