jQuery鼠标滑过图片出现遮罩层和标题

jquery hover插件制作产品图片鼠标滑过图片半透明，标题文字从左到右快速滑动显示，图片背景有遮罩层，鼠标离开后标题和遮罩层消失。

分类：图片代码 > 图片滑动难易：初级

查看演示下载资源下载积分： 20 积分

<div class="section">
    <ul class="clearfix">
        <li>
            <div class="photo"><img src="images/1.jpg" width="318" height="343" /></div>
            <div class="rsp"></div>
            <div class="text"><a href="http://www.sucaihuo.com/js/618.html"><h3>PHP+jQuery+Ajax无刷新分页加搜索</h3></a></div>
        </li>
<li>
            <div class="photo"><img src="images/2.jpg" width="318" height="343" /></div>
            <div class="rsp"></div>
            <div class="text"><a href="http://www.sucaihuo.com/js/619.html"><h3>catslider简单的多商品分类滑动</h3></a></div>
        </li>
<li>
            <div class="photo"><img src="images/3.jpg" width="318" height="343" /></div>
            <div class="rsp"></div>
            <div class="text"><a href="http://www.sucaihuo.com/js/620.html"><h3>slider响应式垂直滚动插件</h3></a></div>
        </li>
<li>
            <div class="photo"><img src="images/4.jpg" width="318" height="343" /></div>
            <div class="rsp"></div>
            <div class="text"><a href="http://www.sucaihuo.com/js/621.html"><h3>jQuery三重面板图片滑动插件</h3></a></div>
        </li>
<li>
            <div class="photo"><img src="images/5.jpg" width="318" height="343" /></div>
            <div class="rsp"></div>
            <div class="text"><a href="http://www.sucaihuo.com/js/622.html"><h3>siteslider不同背景色全屏滑动</h3></a></div>
        </li>
<li>
            <div class="photo"><img src="images/6.jpg" width="318" height="343" /></div>
            <div class="rsp"></div>
            <div class="text"><a href="http://www.sucaihuo.com/js/623.html"><h3>Cufon圆形缩略图焦点图轮播插件</h3></a></div>
        </li>
    </ul>
</div>

$(".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})
});