JS mouse up to slide out the content case

.sliderbar {
            width: 200px;
            height: 40px;
            position: relative;
            margin: 0 auto;
        }

        .sliderbar span {
            display: inline-block;
            width: 50px;
            text-align: center;
            line-height: 40px;
            background-color: pink;
        }

        .con {
            display: inline-block;
            position: absolute;
            width: 150px;
            text-align: center;
            line-height: 40px;
            background-color: pink;
        }

<div class="sliderbar">
        <span>←</span>
        <div class="con">问题反馈</div>
    </div>

var sliderbar = document.querySelector('.sliderbar')
        var con = document.querySelector('.con')
        sliderbar.addEventListener('mouseenter', function () {
            animate (con, -150, function () {
                 // When the animation is finished, exchange the direction of the arrow 
                sliderbar.children [0] .innerHTML = '→'
            })
        })
        sliderbar.addEventListener('mouseleave', function () {
            animated (with, 50, function () {
                sliderbar.children[0].innerHTML = '←'
            })
        })

Also need to introduce a file

function animate(obj, target, callback) {
    clearInterval(obj.timer)
    obj.timer = setInterval ( function () {
         // Change the shift value to an integer to avoid the presence of decimal 
        var step = (target-obj.offsetLeft) / 10 ;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)
            // The callback function is written after the timer ends 
            // if (callback) { 
            //      callback (); 
            // } 
            callback && callback ();
        }
        // Change the movement value inside to gradually decrease the value 
        obj.style.left = obj.offsetLeft + step + 'px' 
    }, 15 )
}