今天小编跟大家讲解下有关使用CSS3和Checkbox实现JQuery的一些效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用CSS3和Checkbox实现JQuery的一些效果 的相关资料，希望小伙伴们看了有所帮助。
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/
来源：爱蒂网
