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/
最新文章
热门文章
猜你喜欢
