<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标悬停文字渐隐渐现动画效果 - 网页模板</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
a,img{border:0; text-decoration:none}
/* section */
.section{width:1070px;margin:auto;overflow:hidden;}
.section ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:200px;height:210px;overflow:hidden;position:relative;}
.section ul li .photo{width:200px;height:210px;overflow:hidden;}
.section .rsp{width:200px;height:210px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
.section .text{position:absolute;width:200px;height:210px;left:-200px;top:0px;overflow:hidden;}
.section .text h3{width:200px;margin-top:160px;height:40px;line-height:40px;text-align:center;color:#000;background:#fff;font-family:"微软雅黑";font-size:18px;}
</style>
<br>
<div class="section">
<ul class="clearfix">
<li>
<div class="photo"><img src="images/1.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/2.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/3.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/4.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/5.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a> </div>
</li>
<li>
<div class="photo"><img src="images/6.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/7.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/8.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/9.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
<li>
<div class="photo"><img src="images/10.jpg" width="200" height="210" /></div>
<div class="rsp"></div>
<div class="text"><a href="#"><h3>网页模板</h3></a></div>
</li>
</ul>
<div class="clear"></div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$(".section ul li .rsp").hide();
$(".section ul li").hover(function(){
$(this).find(".rsp").stop().fadeTo(500,0.5)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
},function(){
$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
$(this).find(".text").animate({left:'-318'}, {duration: 0})
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery鼠标悬停文字渐隐渐现动画效果.zip （13个子文件） 
jQuery鼠标悬停文字渐隐渐现动画效果 
jQuery鼠标悬停文字渐隐渐现动画效果.jpg 116KB jiaoben2944 images 8.jpg 96KB 2.jpg 50KB 1.jpg 47KB 6.jpg 76KB 3.jpg 76KB 5.jpg 50KB 4.jpg 47KB 10.jpg 61KB 9.jpg 61KB 7.jpg 51KB
index.html 4KB js 
jquery-1.8.3.min.js 91KB资源评论
