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

报告相同问题？

  • NodeJS的回调函数中的变量怎么在回调函数外使用 node.js
    2015-10-12 09:34
    回答 1 已采纳 用readFileSync同步读取，而不是异步，异步你只能讲需要使用数据的代码全部放入callback中 http://www.itxxz.com/a/gaoji/2014/1127/node_
  • js如果不写在回调函数里面 如何变成同步去执行 javascript
    2023-02-24 10:30
    回答 3 已采纳 加一个定时器限制一下，可以参考代码： const myTest = new myTest((resolve, reject) => { setTimeout(() => { c
  • 求助 wpf能不能使用回调函数？ c#
    2017-09-18 12:07
    回答 1 已采纳 在C#里，用委托实现回调，在委托传入的函数中编写接收回调的代码。
  • CSS3结合jQuery实现动画效果及回调函数的实例
    2020-10-18 20:56
    `这行代码利用了回调函数的特性，它在第一个动画结束之后才开始执行，以确保`<p>`元素能够先向上移动然后又回到原点。回调函数非常适合用来处理此类顺序性较强的任务，是处理多个连续动画操作的常用方法。 从技术上...
  • c++ WH_GETMESSAGE 钩子 ，勾住程序，但是回调函数没执行，请教 c++
    2015-07-13 03:19
    回答 3 已采纳 你应该用全局钩子，第四个参数用0 dwThreadId [in] Type: DWORD The identifier of the thread with which the hook p
  • jQuery ajax form提交在IE8下不执行回调函数 ajax
    2015-03-09 03:35
    回答 4 已采纳 用fiddler看下，post请求发出了没有？
  • 关于js回调函数的问题 javascript
    2022-04-08 17:34
    回答 3 已采纳 可以直接在A函数调用B函数，但是一般封装的这类函数都是公共函数，它不一定只用于调用B函数，也有可能调用 C 函数 或者 D 函数 如果你在A函数中写死 调用 B函数，那么你的A函数就只能够调用 B函数
  • js回调函数仿360开机
    2020-11-30 05:22
    JavaScript回调函数是异步编程的一种常见方式，它允许我们在一个函数执行完毕后执行另一个函数，特别是在处理异步操作如网络请求、定时器等时。在本例中，我们使用回调函数来模拟360开机的过程，即点击关闭按钮后，...
  • 监听海康ITS5012终端d的回调函数问题 c++
    2017-08-22 13:41
    回答 1 已采纳 管理类其他地方，类似于 LONG lHandle = NET_DVR_StartListen_V30(NULL, wLocalPort, MSesGCallback, NULL); 写一个回调函数，
  • 对于express和nodejs里回调函数的一些疑惑 javascript node.js 前端
    2022-07-30 18:58
    回答 4 已采纳 可以肯定的回答是固定用法，express中get方法第二个参数是回调函数，而回调函数包含req和res两个参数也是定义好的promise需要两个参数，通过resolve进入.then，通过reject
  • 为什么$.post不执行回调函数？ java json spring
    2017-11-07 14:05
    回答 2 已采纳 $("#edit_user").serialize(), 那应该就是这句话出错了吧.导致下面的语句不能执行,你检查一下
  • 理解javascript回调函数
    2020-10-24 23:57
    在JavaScript中，回调函数是编程的一个核心概念，它允许我们控制异步操作的执行顺序，以及让函数A能够被函数B调用，用于完成某些特定的任务。理解回调函数对于任何希望深入学习JavaScript的开发者来说都是基础且至关...
  • 小白:js中回调函数处理后的数据如何保存? javascript json
    2016-02-17 05:47
    回答 1 已采纳 你数据是JSONP的？那只能传递func异步请求，jsonp用script加载数据的，没办法设置同步
  • jQuery回调函数的定义及用法实例
    2020-12-12 23:17
    总结来说，回调函数是JavaScript和jQuery中一种关键的编程概念，它允许我们在特定条件满足时（如动画完成、数据加载或异步操作结束）执行代码，提高了代码的组织性和灵活性。理解和掌握回调函数对于编写高效、响应式...
  • 回调函数的定义和应用场景
    2024-05-29 15:01
    4. **动画和定时器**：在实现动画效果或者定时任务时，`setTimeout`和`setInterval`等函数会使用回调函数来决定何时执行下一步。 ```javascript function animate() { console.log('帧更新'); setTimeout(animate...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 3月8日

悬赏问题

  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境
  • ¥30 关于#java#的问题，请各位专家解答！