function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
<style>
.sliderbar {
position: fixed;
right: 0;
bottom: 100px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #fff;
}
.con {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: purple;
z-index: -1;
}
</style>
</head>
<body>
<div class="sliderbar">
<span>-</span>
<div class="con">问题反馈</div>
</div>
<script>
let sliderbar=document.querySelector(".sliderbar")
let con=document.querySelector(".con")
sliderbar.addEventListener("mouseenter",function(){
animate(con,-160,function(){
sliderbar.children[0].innerHTML="+";
})
})
sliderbar.addEventListener("mouseleave",function(){
animate(con,0,function(){
sliderbar.children[0].innerHTML="-";
})
})
</script>
</body>