js动画函数，后面的回调函数无法执行

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .bd {
            width: 200px;
            height: 200px;
            /* background: #000; */
            line-height: 200px;
            position: absolute;
            left: -150px;
        }

        .bd div:nth-child(1) {
            width: 150px;
            height: 150px;
            background: red;
            margin-top: 25px;
            float: left;
        }

        .bd div:nth-child(2) {
            width: 50px;
            height: 50px;
            background: black;
            /* margin-top: 25px; */
            float: left;
            margin-top: 75px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: white
        }
    style>
head>

<body>
    <div class="bd">
        <div>div>
        <div>拉开div> 
    div>
    <script src='/js/animation-2.js'>script>
    <script>
        var bd = document.querySelector(".bd")
        var sp = bd.children[1];
        // console.log(sp);
        bd.onmouseover = function () {
            animation(bd, "left", 0,function() {
                console.log('xxxxx');
            })
             
        }
        bd.onmouseout = function () {
            animation(bd, "left", -150)
          
        }
    
    script>
body>

html>
---------------------------------------------------------------------------------------------------------------------------------------------------
function animation(obj,atter,end,fn){
    clearInterval(obj.time)
    var speed =0 ;
    obj.time = setInterval(() => {
        //1.获取属性初始数值  需要实时获取
        var cur =  parseInt(getstyle(obj,atter)) 
        //2.加速度  =  结束数值 - 起始数值 /系数
      speed = (end - cur) /20
      speed = end > cur  ? Math.ceil(speed):Math.floor(speed)
      obj.style[atter] = cur+speed+'px'
      //3.临界问题  
      if(obj.style[atter] === end){
        clearInterval(obj.time)
        if (fn){
          fn();
        }
        return;
      }
},20)
}


function getstyle(obj,atter){
    return getComputedStyle(obj,null)[atter]
}

img

你的 end 是一个数值，而你的 obj.style[atter] 得到的是一个带单位的数据 '0px'，你需要自己把他们的类型弄一致了


function animation(obj,atter,end,fn){
    clearInterval(obj.time)
    var speed =0 ;
    obj.time = setInterval(() => {
        //1.获取属性初始数值  需要实时获取
        // 因为我本地没有那个js文件，修改成原生js
        var cur =  obj.style[atter] ? parseInt(obj.style[atter].replace('px','')) : -150  // parseInt(getstyle(obj,atter)) 
        //2.加速度  =  结束数值 - 起始数值 /系数
        speed = (end - cur) /20
        speed = end > cur  ? Math.ceil(speed):Math.floor(speed)
        obj.style[atter] = cur+speed+'px'
        //3.临界问题  
        if(obj.style[atter] === end + 'px'){ // 此处修改为单位一致
            clearInterval(obj.time)
            if (fn){
                fn();
            }
            return;
        }
    },20)
}



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .bd {
            width: 200px;
            height: 200px;
            /* background: #000; */
            line-height: 200px;
            position: absolute;
            left: -150px;
        }

        .bd div:nth-child(1) {
            width: 150px;
            height: 150px;
            background: red;
            margin-top: 25px;
            float: left;
        }

        .bd div:nth-child(2) {
            width: 50px;
            height: 50px;
            background: black;
            /* margin-top: 25px; */
            float: left;
            margin-top: 75px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: white
        }
    </style>
</head>

<body>
    <div class="bd">
        <div></div>
        <div>拉开</div>
    </div>
    <!-- <script src='/js/animation-2.js'></script> -->
    <script>

       

        var bd = document.querySelector(".bd")
        var sp = bd.children[1];
        // console.log(sp);
        bd.onmouseover = function () {
            animation(bd, "left", 0, function () {
                console.log('xxxxx');
            })

        }
        bd.onmouseout = function () {
            animation(bd, "left", -150)

        }
        function animation(obj, atter, end, fn) {
            clearInterval(obj.time)
            var speed = 0;
            obj.time = setInterval(() => {
                //1.获取属性初始数值  需要实时获取
                var cur = parseInt(getstyle(obj, atter));
                //2.加速度  =  结束数值 - 起始数值 /系数
                console.log(cur,"888")
                speed = (end - cur) / 20
                speed = end > cur ? Math.ceil(speed) : Math.floor(speed)
                obj.style[atter] = cur + speed + 'px'
                //3.临界问题  
                if (obj.style[atter] === end) {
                    clearInterval(obj.time)
                    if (fn) {
                        fn();
                    }
                    return;
                }
            }, 20)
        }


        function getstyle(obj, atter) {
            return getComputedStyle(obj, null)[atter]
        }
    </script>
</body>

</html>

效果可以出来 ，是不是js 引入路径不对