jquery+css小案例:实现手风琴效果

分享两种jquery实现是风琴效果示例。

---

先看效果图：

---

下面开始写代码：
其实整个思路很简单，就是当鼠标移在当前块上的时候，当前图片完全显示，其他图片只显示一部分宽度。

---

html代码：

	
		
		
		
		
		
	
	
		

			

				

					
成都
					
美食之城
				
			
			

				

					
丽江
					
魅力之城
				
			
			

				

					
拉萨
					
日光城
				
			
			

				

					
武汉
					
江城
				
			
		
	

---

css代码：

*{
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";
}

#igs{
	width: 1100px;
	height: 400px;
}
.ig{
	width: 100px;
	height: 400px;
	float: left;
}
.ig4{
	width: 780px;
}
.ig1{
	background: url(../img/pic1.png);
}
.ig2{
	background: url(../img/pic2.png);
}
.ig3{
	background: url(../img/pic3.png);
}
.ig4{
	background: url(../img/pic4.png);
}
.txt{
	width: 100px;
	height: 400px;

	background: rgba(0,0,0,0.5);
}
.txt p{
	width: 14px;
	font-size: 14px;
	color: white;
	float: left;
	margin-top: 30px;
	margin-left: 20px;
}

.txt a{
	color: white;
	text-decoration: none;
}
.txt a:hover{
	color: cornflowerblue;
}
.txt .p1{
	color: greenyellow;
	text-shadow: 5px 5px 5px #CCCCCC;
}

---

JavaScript代码——这里有两种写法：

第一种（这种可能比较好理解）：

$(function(){
	$(".txt").mousemove(function(){//鼠标经过
		$(this).parent().stop(true).animate({"width":"780px"},1000);//当前图片的宽度显示为全部
		$(this).parent().siblings().stop(true).animate({"width":"100px"},1000);//其他图片宽变小
	});
});
 

第二种（在理解了第一种的前提下，再看这段代码会觉得很好理解。）

$(function(){
	$(".txt").mousemove(function(){
	$(this).parent().stop(true).animate({"width":"780px"},1000).siblings().stop(true)
	.animate({"width":"100px"},1000);
	});
});

---

大家有疑问的地方欢迎交流呀。