$(document).ready(function(){
//定义选择器为class=photo_lider的图片容器div		
$('.photo_slider').each(function(){
	//为该对象增加样式
	var $this = $(this).addClass('photo-area');
	//找到每个图片
	var $img = $this.find('img');
	//找到每个链接区域
	var $info = $this.find('.info_area');
		
	var opts = {};
	
	$img.ready(function(){
		//获取每个图片的属性宽和高
		opts.imgw = $img.width();
		opts.imgh = $img.height();
	});
	//获取图片容器div的属性宽和高
	opts.orgw = $this.width();
	opts.orgh =  $this.height();
	//改变图片的左和顶边距
	$img.css ({
		marginLeft: "-150px",
		marginTop: "-150px"
	});
	//在选择div的后面分别添加4个<img>标签内容，然后将其再插入到.photo_slider对于div的后面,即产生一个新的div
	var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);
    //将选择的链接标签添加到.photo_slider对于div的后面
	var $open = $('<a href="#" class="more_info">More Info &gt;</a>').appendTo($this);
	//将选择的链接标签添加到每个<div class="info_area">标签的后面
	var $close = $('<a class="close">Close</a>').appendTo($info);
	//获取新div的宽和高
	opts.wrapw = $wrap.width();
	opts.wraph = $wrap.height();
	//在该链接上单击时
	$open.click(function(){
		//以动画方式变化
		$this.animate({ 
			width: opts.imgw,
			height: (opts.imgh+95),
			borderWidth: "10"
			
		}, 600 );
		//链接以淡出效果		
		$open.fadeOut();
		//让变大的div以动画变化
		$wrap.animate({ 
		    width: opts.imgw,
			height: opts.imgh
		}, 600 );
        //原来div以淡入效果变化
		$(".info_area",$this).fadeIn();
		//原来图片以动画效果消失
		$img.animate({
			marginTop: "0px",
			marginLeft: "0px"
		}, 600 );
		
		return false;
	});
	//单击关闭图标
	$close.click(function(){
		$this.animate({ 
			width: opts.orgw,
			height: opts.orgh,
	        borderWidth: "1"
	      }, 600 );
		
		$open.fadeIn();
		
		$wrap.animate({ 
	        width: opts.wrapw,
			height: opts.wraph
		      }, 600 );
		
			$img.animate({
				marginTop: "-150px",
				marginLeft: "-150px"
			}, 600 );

		$(".info_area",$this).fadeOut();
		return false;
	});
	
});
});