jQuery鼠标悬停图片依次滑出遮罩和按钮和内容

<link rel="stylesheet" href="css/zalki_hover_img.css" type="text/css" media="screen">

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="jQuery/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.zalki_hover_img.min-0.2.js" type="text/javascript"></script>

	<!-- 第一种效果 Open -->
	<div class="main_box user_style1" data-hipop="one">
		<img src="photo/1.jpg"><a href="#" class="popup"></a>
	</div>
	<!-- 第一种效果 Close -->

	<!-- 第二种效果 Open -->
	<div class="main_box user_style2" data-hipop="two">
		<img src="photo/2.jpg"><a href="#" class="popup"></a><a href="#" class="popup2"></a>
	</div>
	<!-- 第二种效果 Close -->

	<!-- 第三种效果 Open -->
	<div class="main_box user_style3" data-hipop="one-horizontal">
		<img src="photo/3.jpg"> <a href="#" class="popup">BUY</a>
	</div>
	<!-- 第三种效果 Close -->
	
	<!-- 第四种效果 Open -->
	<div class="main_box user_style4" data-hipop="two-horizontal">
		<img src="photo/4.jpg"> <a href="#" class="popup"></a><a href="#" class="popup2"></a>
	</div>
	<!-- 第四种效果 Close -->

	<!-- 第五种效果 Open -->
	<div class="main_box user_style5" data-hipop="text_content">
		<img src="photo/5.jpg" title alt="Img preview">
		<p class="textTitle">Title Here </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper, 
			libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl. Etiam 
			pharetra sodales dui, nec dignissim nisi adipiscing vel. Integer luctus 
			mi elementum mi ullamcorper eu varius enim rutrum. Morbi gravida dolor eu 
			leo dictum vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. 
			<a href="#">Read More</a>
		</p>
	</div>
	<!-- 第五种效果 Close -->
	
	<!-- 第六种效果 Open -->
	<div class="main_box user_style6" data-hipop="text_content">
		<img src="photo/6.jpg" title alt="Img preview">
		<p class="textTitle">Title Here </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper, 
			libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl.
			<a href="http://www.5imoban.net">静态网页模板</a>
		</p>
	</div>
	<!-- 第六种效果 Close -->
	
	<!-- 第七种效果 Open -->
	<div class="main_box user_style11" data-hipop="text_content2">
		<img src="photo/11.jpg" title alt="Img preview">
		<p class="textTitle">$7 </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Ut nec est viverra velit venenatis faucibus. Maecenas adipiscing, 
			lectus a hendrerit vulputate, tellus urna accumsan felis, semper tempor 
			mauris massa in odio. Duis sit amet nunc eu sem sagittis malesuada.
			<a href="http://www.5imoban.net">jquery特效</a>
		</p>
		</div>
	<!-- 第七种效果 Close -->

	<!-- 第八种效果 Open -->
	<div class="main_box user_style12" data-hipop="one-horizontal">
		<img src="photo/12.jpg"> <a href="#" class="popup">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec est viverra 
		velit venenatis faucibus. Maecenas adipiscing, lectus a hendrerit vulputate, 
		tellus urna accumsan felis, semper tempor mauris massa in odio. Duis sit 
		amet nunc eu sem sagittis malesuada. </a></div>
	<!-- 第八种效果 Close -->

	<!-- 第九种效果 Open -->
	<div class="main_box user_style13" data-hipop="one">
		<img src="photo/13.jpg"> <a href="#" class="popup"></a>
	</div>
	<!-- 第九种效果 Close -->

	<!-- 第十种效果 Open -->
	<div class="main_box user_style7" data-hipop="text_content2">
		<img src="photo/7.jpg" title alt="Img preview">
		<p class="textTitle">Title Here </p>
		<p class="textBox">
			Lorem ipsum dolor sit amet, consectetur adipiscing 
			elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel 
			gravida non, egestas nec eros. <a href="#">Link</a>
		</p>
	</div>
	<!-- 第十种效果 Close -->

	<!-- 第十一种效果 Open -->
	<div class="main_box user_style8" data-hipop="rub">
		<img src="photo/8.jpg">
		<a href="#" class="r_board">AWESOME</a>
	</div>
	<!-- 第十一种效果 Close -->

	<!-- 第十二种效果 Open -->
	<div class="main_box user_style9" data-hipop="rub">
		<img src="photo/9.jpg">
		<a href="#" class="r_board"></a>
	</div>
	<!-- 第十二种效果 Close -->

	<!-- 第十三种效果 Open -->
	<div class="main_box user_style10" data-hipop="rub">
		<img src="photo/10.jpg">
		<a href="#" class="r_board">$7</a>
	</div>
	<!-- 第十三种效果 Close -->

$(window).load(function(){
	$('.main_box').ZalkiHoverImg();
});