使用CSS3和Checkbox实现JQuery的一些效果

show()/hide()的实现

show()/hide()的实现主要控制元素的display属性。
html:

<div id="box">  

        <input type="checkbox" id="sh"/>  

        <label for="sh">show/hide</label>  

        <div id="shbox">  

            点击上面的show/hide实现show()/hide()   

        </div>  

    </div>

css:

#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如下：

:checked~#shbox{   

        opacity:0;   

    }

fadeIn()/fadeOut()可以控制渐显/渐退的速度，同样给#shbox添加transition属性可以模拟这个效果：

#shbox{   

        transition:opacity 2s;   

    }

运行效果：https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的实现

slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的，css修改如下：

: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/