HTML:

点击(此处)折叠或打开

  1. <div class="btn_box">
  2.             <div class="btn">
  3.                 btn1
  4.             <div class="btn_line"></div>
  5.             </div>
  6.             <div class="btn">
  7.                 btn2
  8.                 <div class="btn_line"></div>
  9.             </div>
  10.             <div class="btn">
  11.                 btn3
  12.                 <div class="btn_line"></div>
  13.             </div>
  14.         </div>
Css:

点击(此处)折叠或打开

  1. .btn{
  2.                 display: inline-block;
  3.                 margin: 0 auto;
  4.                 padding: 20px;
  5.                 border: 1px solid #eee;
  6.                 cursor: pointer;
  7.                 position: relative;
  8.             }
  9.             .btn_line{
  10.                 width: 0%;
  11.                 height: 5px;
  12.                 background: greenyellow;
  13.                 position: absolute;
  14.                 top: 0px;
  15.                 left: 0px;
  16.                 opacity: 0;
  17.             }


js:

点击(此处)折叠或打开

  1. $(".btn").click(function(){
  2.                 $(".btn").find(".btn_line").width(0);
  3.                 $(this).find(".btn_line").animate({width:"100%",opacity:"1"});
  4. //                $(this).siblings().find(".btn_line").animate({width:"0",opacity:"0"});
  5.                 
  6.             })
效果图片:
tab动画效果-LMLPHP
11-10 20:27