网上已经有了很多关于手风琴效果的案例，比如手风琴的菜单，手风琴的图片，手风琴选项等等。今天给大家分享一下自己做的图片手风琴切换效果。

Html代码：

<div id="MainDiv">
  <div class="childItem childItem1"></div>
  <div class="childItem childItem2"></div>
  <div class="childItem childItem3"></div>
  <div class="childItem childItem4"></div>
  <div class="childItem childItem5"></div>
  <div class="childItem childItem6"></div>
  <div class="childItem childItem7"></div>
 
</div>

CSS代码：

#MainDiv {
	width: 600px;
	height: 350px;
	border: 5px solid #fff;
	margin: 0 auto;
	margin-top: 100px;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
}
.childItem {
	width: 50px;
	height: 350px;
	background-color: #333;
	background-repeat: no-repeat;
	float: left;
	opacity: 0.3;
	cursor: pointer;
}
.childItem1 {
	background-image: url(di3.jpg);
	width: 300px;
	opacity: 1;
}
.childItem2 {
	background-image: url(di2.jpg);
}
.childItem3 {
	background-image: url(di1.jpg);
}
.childItem4 {
	background-image: url(di4.jpg);
}
.childItem5 {
	background-image: url(di5.jpg);
}
.childItem6 {
	background-image: url(di6.jpg);
}
.childItem7 {
	background-image: url(di7.jpg);
}
.footer {
	width: 100px;
	height: 50px;
	background-color: #333;
	opacity: 0.8;
	overflow: hidden;
	position: absolute;
	width: 600px;
	margin-top: 300px;
}
.footer>p {
	padding: 0 0 0 10px;
}
.footer>p>a {
	color: #fff;
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	text-decoration: none;
}

Js代码：

var ImageAccordion = {
			mCurrentSelectedItem: null,
			mCurrentState:0,
			Init: function() {
				ImageAccordion.mCurrentSelectedItem = $(".childItem1");
				$(".childItem").click(function() {
					if($(this).is(":animated"))return;
					ImageAccordion.ImageAccordion=1;
					ImageAccordion.mCurrentSelectedItem.animate({
						width: "50px"
					}, 300);
					ImageAccordion.mCurrentSelectedItem.css("opacity", "0.3");
					$(this).css("opacity", "1");
					$(this).animate({
						width: "300px"
					}, 300,function(){
						ImageAccordion.ImageAccordion=0;
					});
					ImageAccordion.mCurrentSelectedItem = $(this);
				});
				$(".childItem").hover(function() {
					$(this).stop().animate({
						opacity: 1
					}, 300);
				}, function() {
					if (ImageAccordion.mCurrentSelectedItem.attr("class") != $(this).attr("class")) $(this).stop().animate({
						opacity: 0.3
					}, 300);
				});
			}
		}