一 缓动动画添加回调函数
1）注意实现
回调函数调用的位置：定时器结束的位置。
2）代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>缓动动画添加回调函数</title> <style> span { position: absolute; display: block; top: 200px; 150px; height: 150px; background-color: purple; } </style> </head> <body> <button id="btn">span到800以后执行回调变成红色</button> <span></span> <script> //1 动画函数 第三个参数是接收回调函数的形参 function animate(object,target,callback) { clearInterval(object.timer); object.timer = setInterval(function () { var step = (target - object.offsetLeft)/10; step = step > 0 ? Math.ceil(step) : Math.floor(step);//如果正值就往大取整 如果是负值就往小取整 if (object.offsetLeft == target) { clearInterval(object.timer); //3 在定时器结束后 执行回调函数 if (callback) { callback(); } } object.style.left = object.offsetLeft + step + 'px'; },15); } var span = document.querySelector('span'); var btn = document.querySelector('#btn'); btn.onclick = function(){ //2 在调用动画函数的时候 把回调函数作为实参传递过去 animate(span,800,function () { span.style.backgroundColor = 'red'; }); } </script> </body> </html>
二 把动画函数封装到单独JS文件中
js动画文件
//1 动画函数 第三个参数是接收回调函数的形参 function animate(object,target,callback) { clearInterval(object.timer); object.timer = setInterval(function () { var step = (target - object.offsetLeft)/10; step = step > 0 ? Math.ceil(step) : Math.floor(step);//如果正值就往大取整 如果是负值就往小取整 if (object.offsetLeft == target) { clearInterval(object.timer); //3 在定时器结束后 执行回调函数 if (callback) { callback(); } } object.style.left = object.offsetLeft + step + 'px'; },15); }
HTML页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>动画引用</title> <style> .sliderbar { position: fixed; right: 0; bottom: 100px; 40px; height: 40px; text-align: center; line-height: 40px; cursor: pointer; color: #fff; } .con { position: absolute; left: 0; top: 0; 200px; height: 40px; background-color: purple; z-index: -1; } </style> <script src="animate.js"></script> </head> <body> <div class="sliderbar"> <span>←</span> <div class="con">问题反馈</div> </div> <script> //当鼠标经过sliderbar con盒子滑动到左侧 //当鼠标离开sliderbar con盒子滑动到右侧 var sliderbar = document.querySelector('.sliderbar'); var con = document.querySelector('.con'); console.log(sliderbar,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> </html>
回调函数
//1 函数可以作为一个参数
//2 将a函数作为参数传到b函数里面，当b函数执行完之后，再执行传进来的函数a，这个过程就叫做回调