Chinaunix首页 | 论坛 | 博客
  • 博客访问: 565626
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: jQuery

2018-06-05 14:52:39

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.             })
效果图片:
阅读(380) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册