先看效果图

在这个例子中，我创建了一个水平手风琴效果，用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。

HTML代码

<ul id="horizontalAccordion" class="Accordion">
            <li>
                <a href="#" id="a1">
                    <img src="1.png" width="69" height="69" alt="" />
                    <p>
                        <strong>水平手风琴一</strong>
                       我是内容一
                    </p>
                </a>
            </li>
            <li>
                <a href="#"> 
                    <img src="2.png" width="69" height="69" alt="" />
                    <p>
                        <strong>水平手风琴二</strong>
                       我是内容二
                    </p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="3.png" width="69" height="69" alt="" />
                    <p> 
                        <strong>水平手风琴三</strong>
                       我是内容三
                    </p>
                </a>
            </li>
         </ul>

上面就是我们这个例子需要的HTML结构。我给第一个列表项中的a定义了一个id名“a1”,主要是用来设置一个初始宽度，当页面加载时，让其展开。

CSS代码

.Accordion{
            list-style: none;
            margin: 0;
            padding: 0;
        }

.Accordion li{
            float: left;
            padding: 10px;
            display: block;
            margin-right: 10px;
            background: #333;
        }

.Accordion li a{
            display: block;
            overflow: hidden;
            height: 75px;
            width: 75px;
            text-decoration: none;
            color: #fff;
        }

        #a1{
            width: 210px;
        }

.Accordion li img{
            position: absolute;
            border: 3px solid #881212;
        }

.Accordion li p{
            margin: 0;
            padding: 0;
            width: 120px;
            display: block;
            margin-left: 85px;
        }

.Accordion li strong {
            display: block;
        }

我们通过样式进行列表的初步美化，这里最关键的是a设置了固定的高度和宽度。并设置“overflow:hidden”用来防止p标签中的内容溢出。

jQuery代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
					$(document).ready(function(){
						//定义展开的块
						var lastBlock = $('#a1');
						//展开的块的宽度
						var maxWidth = 210;
						//折叠的块的宽度
						var minWidth = 75;

						$('#horizontalAccordion a').hover(function(){
							$(lastBlock).animate(
								{width: minWidth + "px"},
								{queue:false,duration:400}
							);
							$(this).animate(
								{width:maxWidth + "px"},
								{queue:false,duration:400}
							);
							lastBlock = this;
						});
					});

</script>

为了在页面中使用jQuery，你首先需要从jQuery官网上下载jQuery版本库,并放入你页面的中或者放在之前。

上面展示的jQuery脚本就是我们实现水平手风琴效果的所有脚本代码。

设置了一些初始变量：【lastBlock】代表已经展开的块，我们页面载入时展开的块就是“#a1”；【maxWidth】表示的是展开块的宽度，此例中使用的是“#a1”的宽度“210px”；【minWidth】表示的是折叠块的宽度，我们此处就是a定义的宽度“75px”；
在a绑定一个“.hover()”事件;
在“.hover()”事件中调用两次“.animate()”：第一个是将“lastBlock”折叠起来，因为我们页面载入进来时“#a1”是展开的，第二个是鼠标移入的当前a元素展开其大小。
有一点需要特别的注意：需要在“.animate()”定义“{queue:false}”。如果将其值设置为“true”时，会致使每一个“.hover()”事件存储起来，从而动画会接二边三的播放。

完成上面的所有步骤后，用jQuery制作水平手风琴就完成了。

Demo