使用JQuery / CSS動畫增加div的大小
[英]Animate increase size of div with JQuery/CSS
問題描述
我有一個簡單的網站，有兩個部分。 理想情況下，頂部的部分將以特定尺寸加載，但隨后單擊位於此部分底部的按鈕，該部分將增加尺寸以適合屏幕。 如果再次單擊該部分將恢復其原始大小。
功能應該與此站點上的功能完全相同：
http://www.urbandisplacement.org/map/la
我有一些問題：
- 通過JQuery / CSS實現此效果的最佳方法是什么？
- 如何確保按鈕固定在增長/縮小div的底部並按div移動？
我已經嘗試使用JQuery重置單擊按鈕時重置頂部div的高度，但是當它被使用時，這既沒有動畫也沒有將按鈕保持在div的底部。
謝謝！
1 個解決方案
解決方案1
3 2016-12-03 00:03:45
這是一個簡單的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>
jQuery動畫div以增加點擊高度，並在第二次點擊時折疊
[英]Jquery animate div to increase height on click and collapse on second click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.