基于jQuery图片遮罩滑动文字切换特效

基于jQuery图片遮罩滑动文字切换特效。这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="bodyCon07">
        <div class="teacher">
            <div class="teacherPic">
                <div class="content">
                    <img src="data:images/teacher011.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>马老师</h3>
                        <h4>中国注会师、注册税务师<br />注会、职称高级讲师</h4>
                        <p>拥有丰富的教学和实操经验，多年的教书生涯历练了对会计学的精深把握，课程讲授，深入浅出，语言干脆利落，旁征博引，解题思路，逻辑严密，化繁为简，直击要点。</p>
                    </div>
                </div>
                <div class="content">
                    <img src="data:images/teacher021.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>吴老师</h3>
                        <h4>中国注会师、注册税务师<br />金融学博士、注册会计师</h4>
                        <p>金融学博士，金融、财会专业双重思维带你深入浅出的学习CPA《财管》课程，通俗易懂的授课技巧，便捷、高效的学习方法让你信心百倍的通关CPA！</p>
                    </div>
                </div>
                <div class="content">
                    <img src="data:images/teacher031.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>刘老师</h3>
                        <h4>中国注会师、注册税务师<br />经济师、中级会计师</h4>
                        <p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！实属京城实力派注册会计师讲师！</p>
                    </div>
                </div>
                <div class="content">
                    <img src="data:images/teacher041.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>王老师</h3>
                        <h4>拥有注会、注税、司法三大执业资格证书</h4>
                        <p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！、重难点把握精准，解析细致；</p>
                    </div>
                </div>
                <div class="content">
                    <img src="data:images/teacher051.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>贾老师</h3>
                        <h4>法学硕士<br />会计职称《经济法》</h4>
                        <p>独创了考点讲解、重点训练、考前串讲的“三轮教学”法，为希望短期攻克经济法课程的学员指明正确的道路；对学生真诚亲切，认真负责；授课风格幽默，擅长互动式教学!</p>
                    </div>
                </div>
                <div class="content">
                    <img src="data:images/teacher061.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>杨老师</h3>
                        <h4>管理学博士</h4>
                        <p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！</p>
                    </div>
                </div>
            </div>

            <div style="clear:both;"></div>

        </div>
    </div>

    <!--java开始-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(".content").hover(function () {
            $(this).children(".txt").stop().animate({ height: "360px" }, 200);
            $(this).find(".txt h3").stop().animate({ paddingTop: "130" }, 550);
            $(this).find(".txt p").stop().show();
        }, function () {
            $(this).children(".txt").stop().animate({ height: "100px" }, 200);
            $(this).find(".txt h3").stop().animate({ paddingTop: "0px" }, 550);
            $(this).find(".txt p").stop().hide();
        })
    </script>
    <!--java结束-->

via：http://www.w2bc.com/article/50862