div 鼠标移入滑入滑出

效果：原始样子

当鼠标移入div向右滑出：

当鼠标移开，div向左滑入：

//1.先设置一个div，里面放入一张图片，
//注意div样式里需设置 position:absolute;必须设置
//原始div设置的就是向左15px,right: 158px

 <div id="msg" style="width: 140px;height: 70px; position:absolute; right: 158px" >
                     <a href=""> <img style="width: 140px;height: 70px" src="/frame/static/image/ai.png"></a>
</div>

//引入jquery.js
<script type="text/javascript" src="/frame/jquery-3.3.1.js"></script>

//2.为div设置一个鼠标滑入滑出事件
<script>

//鼠标移出
    $("#msg").mouseenter(function () {
        $("#msg").stop().animate({ //添加animate事件
            left:'0px',             //将div取消左移，让图片向右滑出来
            opacity:'0.5',
            height:'80px',
            width:'160px',

        });
    });

    //鼠标移出
    $("#msg").mouseleave(function () {
        $("#msg").stop().animate({   //div左移，滑入，
            left:'-100px',           //注意：这里需要和上面的animate属性一致，写为left，改成负数，即向左。
            opacity:'0.5',
            height:'80px',
            width:'160px'
        });
    });
</script>