本文共 1583 字，大约阅读时间需要 5 分钟。

在JQuery中，有六个基本动画函数：show()/hide()、fadeIn()/fadeOut()、slideUp()/slideDown()。这篇文章，就利用CSS3+checkbox实现这六个基本动画。

show()/hide()的实现

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

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

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

运行结果：

fadeIn()/fadeOut()的实现

fadeIn()/fadeOut()的实现主要是控制元素的opcity属性。html依旧采用上面的，修改css如下：

:checked~#shbox{    opacity:0;}

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

#shbox{    transition:opacity 2s;}

运行效果：

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属性。

总结

• 主要技巧是利用checkbox（或radio）的checked的属性
• 对于常见隐藏元素的方法有如下五种：
  1. display:none; //不占空间
  2. height:0px;
  3. opacity:0;
  4. position:absolute;left:-11111111px;
  5. visibility:hidden; //占据空间
     张大大对这方面有更详细的解释：

原文链接：

转载地址：http://gytgi.baihongyu.com/