学习 jQuery：揭示照片滑块

在我的 jQuery 学习之旅中，我尝试学习用 jQuery 实现一些 CSS 已能实现的功能，但 jQuery 的实现方式更“性感”。Jonathan Snook 发表了一篇名为“使用 CSS 进行内容叠加”的文章，其中描述了鼠标悬停在某个区域时，如何显示额外的内容。这启发我尝试用 jQuery 实现类似的功能。我的第一个想法是创建一个缩略图照片库，点击按钮后，会显示整张照片以及有关该照片的更多信息。以下是实现结果

查看演示   下载文件

这是用普通话描述的过程

1. 点击“更多信息按钮”
2. 两个部分“生长”，整个容器和包含照片的 div。
3. “更多信息”按钮淡出。
4. “信息”区域和“关闭按钮”淡入。

以下是 CSS 代码

.photo-area {
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	margin: 10px;
	background: white;
}
#photo {
	width: 100px;
	height: 100px;
	background: url(images/mthood.jpg) center center;
	margin-bottom: 5px;
}
.info-area {
	opacity: 0.0;
	}
	a.more-info {
		display: block;
		width: 89px;
		height: 26px;
		background: url(images/moreinfo.jpg);
		text-indent: -9999px;
	}
	a.close {
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: block;
		width: 20px;
		height: 21px;
		background: url(images/close_button.jpg);
		text-indent: -9999px;
	}

以下是 jQuery Javascript 代码

<script type="text/javascript" src="js/jquery.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){

		$(".more-info").click(function(){
			$(this).parents(".photo-area").animate({ 
					width: "500px",
					height: "470px",
			        borderWidth: "10px"
			      }, 600 );
			
			$(this).fadeOut();
			
			$("#photo").animate({ 
		        width: "500px",
				height: "375px"
			      }, 600 );
			$(".info-area").animate({ 
		        opacity: 1.0,
			      }, 600 );
			});
		
		$(".photo-area .close").click(function(){
			$(this).parents(".photo-area-1").animate({ 
					width: "100px",
					height: "130px",
			        borderWidth: "1px"
			      }, 600 );
			
			$(".more-info").fadeIn();
			
			$("#photo").animate({ 
		        width: "100px",
				height: "100px"
			      }, 600 );
			$(".info-area").animate({ 
		        opacity: 0.0,
			      }, 600 );
			});

		});
	</script>

虽然这能正常工作，而且我看到它能运行时非常兴奋，但它也有一些问题和严重的限制。

• .photo-area 和 #photo 生长到的尺寸是硬编码到 javascript 中的。如果它们能根据图像尺寸进行生长，会更酷一些。innerWidth?
• 我引用页面元素的方式过于通用。为了实现第二个图像，我基本上需要复制和粘贴该 javascript 代码，并更改所有类和 ID 名称，才能让它与第二个图像一起工作，且不影响第一个图像。必须有一种方法可以在 javascript 中引用父级/子级，这样只需要编写一次，就可以在任何 .photo-area 上运行

我相信你们许多人对 jQuery 的了解远超我，所以如果你有任何关于如何改进它的建议，请告诉我！