show()/hide()的實現
show()/hide()的實現主要控制元素的display屬性。
html:
XML/HTML Code復制內容到剪貼板
- <div id="box">
- <input type="checkbox" id="sh"/>
- <label for="sh">show/hide</label>
- <div id="shbox">
- 點擊上面的show/hide實現show()/hide()
- </div>
- </div>
css:
CSS Code復制內容到剪貼板
- #box{
- position:relative;
- }
- #box *:not(#shbox){
- display:inline-block;
- }
- input{
- position:absolute;
- left:-10000000px;
- }
- :checked~#shbox{
- display:none;
- }
- label{
- width:100px;
- height:30px;
- line-height:30px;
- text-align:center;
- border:1px solid green;
- position:absolute;
- left:0px;
- cursor:pointer;
- border-radius:5px;
- }
- #shbox{
- background:#ccc;
- color:red;
- width:200px;
- height:200px;
- border:1px solid blue;
- box-sizing:border-box;
- padding:50px;
- position:absolute;
- top:50px;
- }
運行結果:https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
fadeIn()/fadeOut()的實現
fadeIn()/fadeOut()的實現主要是控制元素的opcity屬性。html依舊采用上面的,修改css如下:
CSS Code復制內容到剪貼板
- :checked~#shbox{
- opacity:0;
- }
fadeIn()/fadeOut()可以控制漸顯/漸退的速度,同樣給#shbox添加transition屬性可以模擬這個效果:
CSS Code復制內容到剪貼板
- #shbox{
- transition:opacity 2s;
- }
運行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的實現
slideUp()/slideDown()通過改變元素的高度來實現上卷和下拉。html依舊采用上面的,css修改如下:
CSS Code復制內容到剪貼板
- :checked~#shbox{
- height:0px;
- }
- #shbox{
- background:#ccc;
- overflow-y:hidden;
- color:red;
- width:200px;
- height:200px;
- box-sizing:border-box;
- transition:all 2s;
- position:absolute;
- top:50px;
- }
#shbox添加了 overflow-y:hidden,是為了連文本也實現隱藏,不然,#shbox裡面的文本仍然會顯示; transition實現一個過渡;同時去掉了border屬性。
運行結果:https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/