效果体验：http://hovertree.com/texiao/jquery/7.htm
HTML文件代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body> <style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
} a, img {
border: 0;
text-decoration: none;
} body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
background: #333;
color:white;
} .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .clearfix {
display: inline-table;
}
/* Hides from IE-mac */
*html .clearfix {
height: 1%;
} .clearfix {
display: block;
}
/* End hide from IE-mac */
* + html .clearfix {
min-height: 1%;
}
/* hovertreeaction */
.hovertreeaction {
width: 981px;
margin: 40px auto 0 auto;
overflow: hidden;
} .hovertreeaction ul {
width: 996px;
} .hovertreeaction ul li {
float: left;
margin-right: 14px;
margin-bottom: 13px;
display: inline;
width: 318px;
height: 343px;
overflow: hidden;
position: relative;
} .hovertreeaction ul li .photo {
width: 318px;
height: 343px;
overflow: hidden;
} .hovertreeaction .rsp {
width: 318px;
height: 343px;
overflow: hidden;
position: absolute;
background: #000;
top: 0px;
left: 0px;
} .hovertreeaction .text {
position: absolute;
width: 318px;
height: 343px;
left: -318px;
top: 0px;
overflow: hidden;
} .hovertreeaction .text h3 {
width: 318px;
margin-top: 130px;
height: 55px;
line-height: 55px;
text-align: center;
color: #FFFFFF;
background: #000000;
font-family: "microsoft yahei";
font-size: 26px;
} #foot_bm a, #foot_bm, p, p a {
color: #666;
}
</style> <div class="hovertreeaction">
<h1>鼠标滑过图片变暗文字链接滑出jQuery特效</h1><br />
<ul class="clearfix">
<li>
<div class="photo"><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS90ZXhpYW8vanF1ZXJ5LzcvMS5qcGc=.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/"><h3>HoverTree</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/2.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/menu/jquery/"><h3>何问起</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/3.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://keleyi.com/"><h3>柯乐义</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/4.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/menu/csharp/"><h3>C Sharp</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/5.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://tool.keleyi.com/"><h3>Keleyi</h3></a> </div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/6.gif" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/texiao/"><h3>网页特效</h3></a></div>
</li>
</ul>
<div class="clear"></div>
<a href="http://hovertree.com/hvtart/bjae/o8b7w9u8.htm" style="color:white;">原文</a>
</div> <script>
$(document).ready(function(){ $(".hovertreeaction ul li .rsp").hide(); $(".hovertreeaction 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> </body>
</html>