tab动画效果

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.             })

效果图片：