让人生与事业结伴，让生命与使命同行。你要按你所想的去生活，否则，你迟早会按你所生活的去想。
show()/hide()的实现
show()/hide()的实现主要控制元素的display属性。
html:
XML/HTML Code复制内容到剪贴板
- <divid="box">
- <inputtype="checkbox"id="sh"/>
- <labelfor="sh">show/hide</label>
- <divid="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:1pxsolidgreen;
- position:absolute;
- left:0px;
- cursor:pointer;
- border-radius:5px;
- }
- #shbox{
- background:#ccc;
- color:red;
- width:200px;
- height:200px;
- border:1pxsolidblue;
- 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:opacity2s;
- }
运行效果：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:all2s;
- position:absolute;
- top:50px;
- }
#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏，不然，#shbox里面的文本仍然会显示； transition实现一个过渡;同时去掉了border属性。
运行结果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/
到此这篇关于如何使用CSS3和Checkbox如何实现JQuery的一些效果就介绍到这了。点燃了的火炬不是为了火炬本身，就像我们的美德应该超过自己照亮别人。更多相关如何使用CSS3和Checkbox如何实现JQuery的一些效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
