动画期间反复执行代码？

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

您应该尝试使用step方法的animate或progress：

$('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的第一个和最后一个值动画属性，分别为动画属性的道具。

Answer 2

如果您希望在之前获得值，请使用步骤，如果您希望之后>，则使用进度。像这样：

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