show()/hide()的实现

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

XML/HTML Code 复制内容到剪贴板 <div id="box">        < input   type = "checkbox"   id = "sh" />         < label   for = "sh" > show/hide </ label >         < div   id = "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 : 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如下：

CSS Code 复制内容到剪贴板 :checked~#shbox{        opacity:0;    }  

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

CSS Code 复制内容到剪贴板 #shbox{        transition:opacity 2s;    }  

运行效果：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: all  2s;         position : absolute ;         top : 50px ;    }  

#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏，不然，#shbox里面的文本仍然会显示； transition实现一个过渡;同时去掉了border属性。
运行结果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/