如何重置带step函数的jQuery animate动画？

问题原因 #

你遇到的问题源于jQuery对自定义动画属性的跟踪机制：当使用.animate()处理非标准DOM属性（比如你定义的now）时，jQuery会在元素的$.data()中存储该属性的当前状态，以此计算动画的起始/结束值。

当你连续两次调用myFun()时，第一次动画尚未完成，now的当前值正趋近于100，此时第二次动画的目标值同样是100，jQuery会判定该属性已接近目标，直接触发step函数并传入最终值100，不会执行完整的动画过程。

另外你之前在complete中写的now = 0，只是修改了step函数的局部参数，并没有改变jQuery存在元素数据中的属性跟踪值，所以无法解决问题。

解决方案 #

根据你的需求（重复执行带step的动画），提供三种常用方案：

方案1：立即重置并重新开始动画 #

如果你希望每次调用myFun()时，立即中断当前动画，重新从0开始执行完整的动画：

myFun = () => {
    const $test = $('.test');
    // 停止当前所有动画、清除队列，并重置自定义属性的跟踪值为0
    $test.stop(true).data('animateNow', 0);
    $test.animate({ now: 100 }, {
        duration: 1000,
        step: function(now) {
            console.log(now);
        }
    });
}

myFun();
myFun();

方案2：按队列依次执行动画 #

如果你希望两次动画按顺序执行（第一次完成后再启动第二次），且每次都从0开始：

myFun = () => {
    $('.test').animate({ now: 100 }, {
        duration: 1000,
        step: function(now) {
            console.log(now);
        },
        complete: function() {
            // 动画完成后，重置自定义属性的跟踪值为0，为下一次动画做准备
            $(this).data('animateNow', 0);
        }
    });
}

// jQuery会自动将动画加入元素的动画队列，依次执行
myFun();
myFun();

方案3：循环执行动画 #

如果需要动画无限循环执行，只需在complete回调中递归调用myFun()即可：

myFun = () => {
    $('.test').animate({ now: 100 }, {
        duration: 1000,
        step: function(now) {
            console.log(now);
        },
        complete: function() {
            $(this).data('animateNow', 0);
            // 递归调用，实现循环
            myFun();
        }
    });
}

myFun();

内容的提问来源于stack exchange，提问作者user19967625