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