利用JQUERY和CSS3实现优雅的手风琴

<写在前面>

这一篇翻译练习，同样难度一般，感觉翻的不是太好。原文地址：http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/

演示地址：http://tympanus.net/Tutorials/ElegantAccordion/

<正文>

今天我们将要为内容制作一款优雅的手风琴。我们的想法是当鼠标悬停时，手风琴的琴键会划出。我们将会加入CSS3属性来增强样式。OK，让我们从组成结构开始。

【组成】

HTML将会包括一个列表，而每个手风琴琴键都是一个列元素。在列元素的内部，有一个划过时会隐藏的标题。并且，会有一个用于白色背景渐变的元素和一个用于描述的div。以下只是一个列元素的组成：

 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>

另一个列元素将会包括bg2，bg3和bg4类。由于我们想在稍后在JavaScript定位这个无序的列表，所以我们给它设置了一个class和id。当然我们并不是真正需要这个class，恰恰相反，我们在样式表中通过#accordion来设计这个元素。但是，这是一个将事物分离的好方法。

【THE CSS】

列表的样式如下所示：

 1 ul.accordion{

 2     list-style:none;

 3     position:absolute;

 4     right:80px;

 5     top:0px;

 6     font-family: Cambria, serif;

 7     font-size: 16px;

 8     font-style: italic;

 9     line-height: 1.5em;

10 }

 

每一个列元素都会有一个不同的背景图片，所以我们首先为每个列元素定义公用的样式属性，然后再根据背景图片定义单独（不共用）的classes。

 1 ul.accordion li{

 2     float:right;

 3     width:115px;

 4     height:480px;

 5     display:block;

 6     border-right:2px solid #fff;

 7     border-bottom:2px solid #fff;

 8     background-color:#fff;

 9     background-repeat:no-repeat;

10     background-position:center center;

11     position:relative;

12     overflow:hidden;

13     cursor:pointer;

14     -moz-box-shadow:1px 3px 15px #555;

15     -webkit-box-shadow:1px 3px 15px #555;

16     box-shadow:1px 3px 15px #555;

17 }

18 ul.accordion li.bg1{

19     background-image:url(../images/1.jpg);

20 }

21 ul.accordion li.bg2{

22     background-image:url(../images/2.jpg);

23 }

24 ul.accordion li.bg3{

25     background-image:url(../images/3.jpg);

26 }

27 ul.accordion li.bg4{

28     background-image:url(../images/4.jpg);

29 }

 

注意，盒状阴影在IE下无效。

每一项的最初宽度是115个像素。我们将会在JavaScript的hover函数中（变成480px）注意到这点。

我们给每个列元素设计的边框只用于一边，否则在两个项目之间会有两个边框而且边界只有一个。所以，我们需要给左边框定义一个class用于最后一个列元素（它们向右浮动，所以顺序是相反的）。

1 ul.accordion li.bleft{

2     border-left:2px solid #fff;

3 }

 

现在，我们想在关闭状态下给每个列项目在半透明的背景下做一个漂亮的标题：

 1 ul.accordion li .heading{

 2     background-color:#fff;

 3     padding:10px;

 4     margin-top:60px;

 5     opacity:0.9;

 6     text-transform:uppercase;

 7     font-style:normal;

 8     font-weight:bold;

 9     letter-spacing:1px;

10     font-size:14px;

11     color:#444;

12     text-align:center;

13     text-shadow:-1px -1px 1px #ccc;

14 }

 

包含表述的div将包括以下样式：

1 ul.accordion li .description{

2     position:absolute;

3     width:480px;

4     height:175px;

5     bottom:0px;

6     left:0px;

7     display:none;

8 }

 

我们在最初将其设置为display:none，因为我们希望它只在悬停时出现。以下是我们如何设置内部元素：

 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 }

 

唯一缺少的样式就是渐变元素的：

1 ul.accordion li .bgDescription{

2     background:transparent url(../images/bgDescription.png) repeat-x top left;

3     height:340px;

4     position:absolute;

5     bottom:0px;

6     left:0px;

7     width:100%;

8     display:none;

9 }

 

我们在重复的图片（repeat-x top left）是从一个白色变成透明的渐变。当我们让这个div从底部滑入的时候，这将呈现很漂亮的效果。

让我们加入一点魔法吧！

【THE JAVASCRIPT】

首先，我们在body结束标记前包含入jQuery库。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

现在，我们来增加一个函数，是的当鼠标悬停在列元素上时，列元素滑出。利用动画效果将宽度增加到480px来完成这个功能。然后顶部标题淡出，同时渐变（css class “bgDescription”）和描述出现：

 1 <script type="text/javascript">

 2 $(function() {

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

 4         function () {

 5             var $this = $(this);

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

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

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

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

10         },

11         function () {

12             var $this = $(this);

13             $this.stop().animate({'width':'115px'},1000);

14             $('.heading',$this).stop(true,true).fadeIn();

15             $('.description',$this).stop(true,true).fadeOut(500);

16             $('.bgDescription',$this).stop(true,true).slideUp(700);

17         }

18     );

19 });

20 </script>

 

$(‘#accordion > li’).hover内的第一个函数在鼠标移到单个元素上时被触发，当鼠标再次移走时，第二个函数被触发。这里我们颠倒了动作并加入了定时，使得元素顺滑地消失。

就这么多！希望你能享受这个教程并觉得这是有用的。