使用 jQuery & CSS3 实现优雅的手风琴效果-前端里

手风琴效果常用于切换显示一组内容，这种方式既可以节省网页空间又可以有动画效果。今天，我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我们将添加一些 CSS3 属性来提升外观。

HTML示例代码：

<ul class="accordion" id="accordion">      <li class="bg1">          <div class="heading">Heading</div>          <div class="bgDescription"></div>          <div class="description">              <h2>Heading</h2>              <p>Some descriptive text</p>              <a href="#">more ?</a>          </div>      </li>  </ul>

CSS示例代码：

ul.accordion li .description h2{      text-transform:uppercase;      font-style:normal;      font-weight:bold;      letter-spacing:1px;      font-size:45px;      color:#444;      text-align:left;      margin:0px 0px 15px 20px;      text-shadow:-1px -1px 1px #ccc;  }  ul.accordion li .description p{      line-height:14px;      margin:10px 22px;      font-family: "Trebuchet MS", sans-serif;      font-size: 12px;      font-style: italic;      font-weight: normal;      text-transform: none;      letter-spacing: normal;      line-height: 1.6em;  }  ul.accordion li .description a{      position:absolute;      bottom:5px;      left:20px;      text-transform:uppercase;      font-style:normal;      font-size:11px;      text-decoration:none;      color:#888;  }  ul.accordion li .description a:hover{      color:#333;      text-decoration:underline;  }

JavaScript代码：

$(function() {      $('#accordion > li').hover(          function () {              var $this = $(this);              $this.stop().animate({'width':'480px'},500);              $('.heading',$this).stop(true,true).fadeOut();              $('.bgDescription',$this).stop(true,true).slideDown(500);              $('.description',$this).stop(true,true).fadeIn();          },          function () {              var $this = $(this);              $this.stop().animate({'width':'115px'},1000);              $('.heading',$this).stop(true,true).fadeIn();              $('.description',$this).stop(true,true).fadeOut(500);              $('.bgDescription',$this).stop(true,true).slideUp(700);          }      );  });

您可能感兴趣的相关文章

使用 jQuery & CSS3 实现优雅的手风琴效果

相关推荐

热门推荐

站内搜索

热门标签

您可能感兴趣