show()/hide()的實(shí)現(xiàn)

show()/hide()的實(shí)現(xiàn)主要控制元素的display屬性。
html:

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="box">  
    <input type="checkbox" id="sh"/>  
    <label for="sh">show/hide</label>  
    <div id="shbox">  
        點(diǎn)擊上面的show/hide實(shí)現(xiàn)show()/hide()   
    </div>  
</div>  

css:

CSS Code復(fù)制內(nèi)容到剪貼板

#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;   
}  

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
fadeIn()/fadeOut()的實(shí)現(xiàn)

fadeIn()/fadeOut()的實(shí)現(xiàn)主要是控制元素的opcity屬性。html依舊采用上面的，修改css如下：

CSS Code復(fù)制內(nèi)容到剪貼板

:checked~#shbox{   
    opacity:0;   
}  

fadeIn()/fadeOut()可以控制漸顯/漸退的速度，同樣給#shbox添加transition屬性可以模擬這個(gè)效果：

CSS Code復(fù)制內(nèi)容到剪貼板

#shbox{   
    transition:opacity 2s;