動畫增加div與jQuery/CSS的大小

我有一個簡單的網站有兩個部分。理想情況下，頂部的部分會以特定的尺寸加載，但是通過點擊位於本部分底部的按鈕，部分會增加尺寸以適應屏幕。如果再次點擊，該部分將回到其原始大小。動畫增加div與jQuery/CSS的大小

功能應該是完全一樣的一個在這個網站：

http://www.urbandisplacement.org/map/la

我有幾個問題：

什麼是實現通過JQuery的/ CSS這個效應的最好方法？
如何確保按鈕保持固定在成長/收縮div的底部並按div移動？

我試過重置頂部div的高度，當按鈕被點擊時，使用jQuery，但是這既不使動畫也不保留使用div時底部的按鈕。

謝謝！

來源

2016-12-02 user2030942

檢查你都鏈接到該網站的代碼。他們在做什麼來促成它發生？您實際上可以下載並使用他們在其網站上擁有的JS。 –

這裏有一個簡單的CSS唯一版本：

https://jsfiddle.net/otenf0fy/

body,#wrapper { 
 
    height: 100%; 
 
} 
 
#expand { 
 
    display: none; 
 
} 
 
#top { 
 
    background: black; 
 
    color: white; 
 
    padding: 1em; 
 
    position: relative; 
 
} 
 
label { 
 
    background: blue; 
 
    color: white; 
 
    border-radius: .5em; 
 
    padding: 1em; 
 
    display: block; 
 
    width: 5em; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    bottom: 1em; 
 
    left: 50%; 
 
    transform: translate(-2.5em,0); 
 
} 
 
#expand:checked ~ #top { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<body> 
 
<div id="wrapper"> 
 
<input id="expand" type="checkbox"> 
 
<div id="top"> 
 
<p> 
 
This is just a test 
 
</p> 
 
<label for="expand">Expand</label> 
 
</div> 
 
</div> 
 
</body>

來源

2016-12-03 00:03:45 junkfoodjunkie

動畫增加div與jQuery/CSS的大小

回答

相關問題