在动画过程中重复执行代码

Execute code repeatedly during animation?

本文关键字：执行 代码 复执 动画 过程中      更新时间：2023-09-26

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

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

但是，我希望在动画过程中更新此代码，例如：如果用户500px，我希望lastScrollTop变为 450，400，300，200，100，50，0

有没有办法在动画过程中保持我的变量更新？

您应该考虑使用step或progress 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。

如果要在动画发生之前获取值，请使用步骤;如果要在动画发生后获取值，请使用进度。像这样：

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