捣碎码凡 2023-03-08 11:53 采纳率: 0%
浏览 30

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

<!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)
          
        }
    
    </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]
}
  • 写回答

3条回答 默认 最新

  • 文盲老顾 WEB应用领新星创作者 2023-03-08 12:03
    关注

    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)
}
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 3月8日

悬赏问题

  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错
  • ¥20 @microsoft/fetch-event-source 流式响应问题
  • ¥15 ogg dd trandata 报错
  • ¥15 高缺失率数据如何选择填充方式
  • ¥50 potsgresql15备份问题
  • ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
  • ¥15 目前主流的音乐软件，像网易云音乐，QQ音乐他们的前端和后台部分是用的什么技术实现的?求解！
  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗？
  • ¥15 拟通过pc下指令到安卓系统，如果追求响应速度，尽可能无延迟，是不是用安卓模拟器会优于实体的安卓手机？如果是，可以快多少毫秒？