使用CSS3和Checkbox實(shí)現(xiàn)JQuery的一些效果

淡忘~淺思 發(fā)布時(shí)間：2015-08-03 18:21:23 作者：佚名

這篇文章主要介紹了使用CSS3和Checkbox實(shí)現(xiàn)JQuery的一些效果,包括show()/hide()和fadeIn()/fadeOut()以及slideUp()/slideDown()的實(shí)現(xiàn),需要的朋友可以參考下

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

運(yùn)行效果：https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的實(shí)現(xiàn)

slideUp()/slideDown()通過(guò)改變?cè)氐母叨葋?lái)實(shí)現(xiàn)上卷和下拉。html依舊采用上面的，css修改如下：

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

: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,是為了連文本也實(shí)現(xiàn)隱藏，不然，#shbox里面的文本仍然會(huì)顯示； transition實(shí)現(xiàn)一個(gè)過(guò)渡;同時(shí)去掉了border屬性。
運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/