因为实现方式比较简单，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现手风琴效果</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.wrapper{
width:600px;
margin:20px auto;
padding: 20px;
overflow: hidden;
}
.imgs{
float: left;
height:200px;
width:20%;
}
.img-1{
background:#ccc url(images/1.jpg) no-repeat;
}
.img-2{
background:#ccc url(images/2.jpg) no-repeat;
}
.img-3{
background:#ccc url(images/3.jpg) no-repeat;
}
.img-4{
background:#ccc url(images/4.jpg) no-repeat;
}
.img-5{
background:#ccc url(images/5.jpg) no-repeat;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="imgs img-1"></li>
<li class="imgs img-2"></li>
<li class="imgs img-3"></li>
<li class="imgs img-4"></li>
<li class="imgs img-5"></li>
</ul>
<script src="jquery-2.0.3.min.js"></script>
<script>
(function(){
$(".imgs").mouseover(function(){
$(".imgs").not($(this)).animate({
width:"15%"
},600);
$(this).animate({
width:"40%"
},600);
}).mouseout(function(){
$(".imgs").animate({
width:"20%"
},600);
});
})();
</script>
</body>
</html>
效果图：
特别说明：
当鼠标移动到图片上时，动画效果分别是15%和40%，15%*4+40%=100%。
但是当容器的大小和图片大小不是整除的时候，这一块动画效果就应该设置的总和小于100%，具体多少，还要根据相除的余数决定。
这一块这样设计是因为：当启动动画效果时，百分比是16位小数点，然后相加可能会大于100%，就会出现浮动问题。
详见下图：
为了更好地对比，设置.wrapper{width:640px;}，看一下效果图：
原文：http://my.oschina.net/zyxchuxin/blog/516990