javascript - 在动画期间重复执行代码？

Question

我在 Java 中看到过类似的东西，我想知道在 JavaScript/jQuery 中是否有类似的东西。基本上我有一个带有动画的函数和一个在其末尾运行的代码：

$('html,body').animate({ scrollTop: 0 }, 'slow', function(){
    lastScrollTop = $(this).scrollTop();
});

但是，我希望在动画期间更新此代码，例如：如果用户是500px，我想lastScrollTop成为 450,400,300,200,100,50,0

有没有办法让我的变量在动画期间保持更新？

Answer 1

您应该研究使用steporprogress的animate方法：

$('body').animate({ scrollTop: 0 }, {
    duration: 'slow',
    step: function(now, fx) {
        lastScrollTop = now; //Get the current scroll amount.
    },
    complete: function() {
        lastScrollTop = $(this).scrollTop();
    }
});

• now: 每一步动画属性的数值
• fx: 对 jQuery.fx 原型对象的引用，其中包含许多属性，例如动画元素的 elem，动画属性的第一个和最后一个值的 start 和 end，以及被动画属性的 prop。

Answer 2

如果您想在动画发生之前获取值，请使用 step，如果您想要在动画发生之后获取值，请使用 progress 。像这样的东西：

$('html,body').animate(
    {scrollTop: 0}, 
    {
        'slow',
        step: function(currentTop){
            console.log (currentTop)
        }
    }, 
    function(){
        lastScrollTop = $(this).scrollTop();
    }
);