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


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

效果演示     插件下载

HTML示例代码:


  1. <ul class="accordion" id="accordion">

  2.     <li class="bg1">

  3.         <div class="heading">Heading</div>

  4.         <div class="bgDescription"></div>

  5.         <div class="description">

  6.             <h2>Heading</h2>

  7.             <p>Some descriptive text</p>

  8.             <a href="#">more ?</a>

  9.         </div>

  10.     </li>

  11. </ul>
复制代码


CSS示例代码:


  1. ul.accordion li .description h2{

  2.     text-transform:uppercase;

  3.     font-style:normal;

  4.     font-weight:bold;

  5.     letter-spacing:1px;

  6.     font-size:45px;

  7.     color:#444;

  8.     text-align:left;

  9.     margin:0px 0px 15px 20px;

  10.     text-shadow:-1px -1px 1px #ccc;

  11. }

  12. ul.accordion li .description p{

  13.     line-height:14px;

  14.     margin:10px 22px;

  15.     font-family: "Trebuchet MS", sans-serif;

  16.     font-size: 12px;

  17.     font-style: italic;

  18.     font-weight: normal;

  19.     text-transform: none;

  20.     letter-spacing: normal;

  21.     line-height: 1.6em;

  22. }

  23. ul.accordion li .description a{

  24.     position:absolute;

  25.     bottom:5px;

  26.     left:20px;

  27.     text-transform:uppercase;

  28.     font-style:normal;

  29.     font-size:11px;

  30.     text-decoration:none;

  31.     color:#888;

  32. }

  33. ul.accordion li .description a:hover{

  34.     color:#333;

  35.     text-decoration:underline;

  36. }
复制代码


JavaScript代码:


  1. $(function() {

  2.     $('#accordion > li').hover(

  3.         function () {

  4.             var $this = $(this);

  5.             $this.stop().animate({'width':'480px'},500);

  6.             $('.heading',$this).stop(true,true).fadeOut();

  7.             $('.bgDescription',$this).stop(true,true).slideDown(500);

  8.             $('.description',$this).stop(true,true).fadeIn();

  9.         },

  10.         function () {

  11.             var $this = $(this);

  12.             $this.stop().animate({'width':'115px'},1000);
标签: CSSjQuery