欢迎光临!欢迎来到小司的个人网站

关键词搜索:

当前位置: 首页>前端开发>JQUERY知识>

jQuery-鼠标经过文字由上至下动画显示 查看代码演示

日期:2018-05-16 编辑:admin 阅读次数:

今天主要写一个鼠标在经过一个div框时,框外的文字由上至下过渡显示:

1.鼠标经过之前:

2.鼠标经过之后:

使鼠标经过前后动画产生过渡效果。

一.结构:  

<figure>

    <a href="#">     /*将a设置overflow: hidden;超出部分隐藏*/

        <p>作者:司伟</p>    /*将p设置position: absolute;超出a的框,使其隐藏*/

        <img src="1.jpg">

        <h2>鼠标经过上下滑动</h2>

<p>鼠标经过上下滑动鼠标经过上下滑动</p>

<p>

    <span>微信公众号:</span>

    <span>a505645877</span>

</p>

    </a>

</figure>

二.样式:

*{margin: 0;padding: 0;}

figure{

    width: 280px;

    height: 380px;

    margin:80px auto;

    text-align: center;

    padding: 20px;

    }

figure>a{

    display: block;

    border: 1px solid red;

    position: relative;

    text-decoration: none;

    overflow: hidden;

    padding-bottom: 15px;

    }

figure>a>p:nth-child(1){

    position: absolute;

    width: 100%;

    height: 50px;

    line-height: 50px;

    color: #fff;

    top: -50px;

    transition: all .5s;

    }

figure>a>h2{

    color: #14191e;

    font: bold 14px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;

    }

figure>a>p:nth-child(4){

    color: #b4bbbf;

    font: 12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;margin:10px 0;

    }

figure>a>p:nth-child(5)>span{

    color: #787d82;

    font: 12px/18px "Microsoft Yahei","Hiragino Sans GB",Helvetica,"微软雅黑",Tahoma,Arial,sans-serif;

    }

.show{

    top: 0!important;

    background: rgba(32, 32, 33,.6);

    }

三.JS部分只要在鼠标经过时,让超出a框的&lsquo;p&rsquo;添加class名字show即可。

    <script src="jquery.min.js"></script>

    <script>

        $('figure>a').hover(function(){

    $(this).children().eq(0).addClass('show');

        },function(){

    $(this).children().eq(0).removeClass('show');

});

    </script>

PS:此动画效果原理在于,先用绝对定位将P移除a框,设置top值为P的负高度;当鼠标经过a框时,让a框外的P元素添加class名字show,使top值为0,再加上css3&lsquo;transition&rsquo;属性,使其产生过渡。

相关文章

×