使用CSS3和Checkbox實現JQuery的一些效果

 show()/hide()的實現

show()/hide()的實現主要控制元素的display屬性。
html:

XML/HTML Code復制內容到剪貼板

1. <div id="box">
2. <input type="checkbox" id="sh"/>
3. <label for="sh">show/hide</label>
4. <div id="shbox">
5. 點擊上面的show/hide實現show()/hide()
6. </div>
7. </div>

css:

CSS Code復制內容到剪貼板

1. #box{
2. position:relative;
3. }
4. #box *:not(#shbox){
5. display:inline-block;
6. }
7. input{
8. position:absolute;
9. left:-10000000px;
10. }
11. :checked~#shbox{
12. display:none;
13. }
14. label{
15. width:100px;
16. height:30px;
17. line-height:30px;
18. text-align:center;
19. border:1px solid green;
20. position:absolute;
21. left:0px;
22. cursor:pointer;
23. border-radius:5px;
24. }
25. #shbox{
26. background:#ccc;
27. color:red;
28. width:200px;
29. height:200px;
30. border:1px solid blue;
31. box-sizing:border-box;
32. padding:50px;
33. position:absolute;
34. top:50px;
35. }

運行結果：https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
fadeIn()/fadeOut()的實現

fadeIn()/fadeOut()的實現主要是控制元素的opcity屬性。html依舊采用上面的，修改css如下：

CSS Code復制內容到剪貼板

1. :checked~#shbox{
2. opacity:0;
3. }

fadeIn()/fadeOut()可以控制漸顯/漸退的速度，同樣給#shbox添加transition屬性可以模擬這個效果：

CSS Code復制內容到剪貼板

1. #shbox{
2. transition:opacity 2s;
3. }

運行效果：https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的實現

slideUp()/slideDown()通過改變元素的高度來實現上卷和下拉。html依舊采用上面的，css修改如下：

CSS Code復制內容到剪貼板

1. :checked~#shbox{
2. height:0px;
3. }
4. #shbox{
5. background:#ccc;
6. overflow-y:hidden;
7. color:red;
8. width:200px;
9. height:200px;
10. box-sizing:border-box;
11. transition:all 2s;
12. position:absolute;
13. top:50px;
14. }

#shbox添加了 overflow-y:hidden,是為了連文本也實現隱藏，不然，#shbox裡面的文本仍然會顯示； transition實現一個過渡;同時去掉了border屬性。
運行結果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/