案例效果： 鼠标经过就将盒子滑动到右侧，同时外盒子内容箭头指向变化 鼠标离开就将盒子滑动到左侧，同时外盒子内容箭头指向变化回来
思路：动画封装函数，回调函数
代码：
<style> .sliderbar { position: relative; float: right; margin-top: 100px; height: 40px; width: 60px; background: rgb(116, 157, 173); } span { position: absolute; top: 0; width: 80px; height: 40px; text-align: center; line-height: 40px; background: rgb(116, 157, 173); } .con { position: absolute; left: 0px; top: 0; height: 40px; width: 160px; text-align: center; line-height: 40px; background-color: #37b642; cursor: pointer; z-index: -1; } </style> <script src="animate.js"></script> </head> <body> <div class="sliderbar"> <span>←</span> <div class="con">问题反馈</div> </div> <script> //1.获取元素 var sliderbar = document.querySelector(".sliderbar"); var con = document.querySelector(".con"); //当鼠标经过sliderbar 就让con这个盒子滑动到左侧 //当鼠标离开sliderbar 就让con盒子滑动到右侧 sliderbar.addEventListener("mouseenter", function () { animate(con, -160, function () { //当动画执行完毕，就把←改为→ sliderbar.children[0].innerHTML = "→"; }); }); sliderbar.addEventListener("mouseleave", function () { animate(con, 10, function () { sliderbar.children[0].innerHTML = "←"; }); }); </script> </body>其中：JS文件见上一篇文：动画函数的实现、封装、回调函数
