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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

<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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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})
});