基于jquery hover图片遮罩层滑动

分享一款基于jquery hover图片遮罩层滑动。这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="web">  <img src='/images/loading.gif' data-original="images/course.jpg"/>  <div class="con">    <ul>      <li>        <img src='/images/loading.gif' data-original="images/class1.jpg"/>        <div class="txt">          <h3>IT培训</h3>          <p>为您铺就成为IT大神的在线学习之路</p>        </div>      </li>      <li>        <img src='/images/loading.gif' data-original="images/class2.jpg"/>        <div class="txt">          <h3>语言学习</h3>          <p>英语、韩语、日语各类语言课程一网打尽</p>        </div>      </li>      <li>        <img src='/images/loading.gif' data-original="images/class3.jpg"/>        <div class="txt">          <h3>职业技能</h3>          <p>传授会计师、建筑师等各类考证学习宝典</p>        </div>      </li>      <li>        <img src='/images/loading.gif' data-original="images/class4.jpg"/>        <div class="txt">          <h3>中小学/大学</h3>          <p>小学、初中、高中各科课程在线辅导</p>        </div>      </li>      <li>        <img src='/images/loading.gif' data-original="images/class5.jpg"/>        <div class="txt">          <h3>兴趣爱好</h3>          <p>吉他、摄影等各类兴趣教程让你成为生活达人</p>        </div>      </li>      <li>        <img src='/images/loading.gif' data-original="images/class6.jpg"/>        <div class="txt">          <h3>亲子学堂</h3>          <p>教你如何和宝宝一起成长</p>        </div>      </li>    </ul>  </div></div>

js代码：

$(".con ul li").hover(function(){  $(this).find(".txt").stop().animate({height:"198px"},400);  $(this).find(".txt h3").stop().animate({paddingTop:"60px"},400);},function(){  $(this).find(".txt").stop().animate({height:"45px"},400);  $(this).find(".txt h3").stop().animate({paddingTop:"0px"},400);})

via：http://www.w2bc.com/Article/46125

原标题：基于jquery hover图片遮罩层滑动

关键词：jquery