jQuery - .animate() 在滚动时非常延迟答案

【问题标题】：jQuery - .animate() very delayed on scrolljQuery - .animate() 在滚动时非常延迟
【发布时间】：2021-12-18 07:27:12
【问题描述】：

我希望在用户滚动并尝试使用 .animate() 方法时让图像弹出和弹出视图。它在技术上有效，但非常滞后，有时甚至在窗口滚动回顶部时甚至不会回来。这是一个示例小提琴：EXAMPLE

$(window).scroll(function(){
    if($(this).scrollTop() > 50){
        $('.rot-frog').animate({
            'bottom': '-80',
            'right': '-40'
        }, 500);
    }else{
        $('.rot-frog').animate({
            'bottom': '-12',
            'right': '-6'
        }, 500);
    }
});

我没有收到任何控制台错误，并且我尝试了各种 CSS 属性，但得到了相同的延迟结果。所以我假设它与 .scroll() 和 .animate() 组合有关，我只是不确定为什么。我试过搜索类似的问题，但找不到我想要的东西。有人可以告诉我为什么会这样吗？

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

滚动事件在滚动移动期间触发（而不是在滚动结束时），因此要执行大量动画函数。
如果每次向上或向下滚动只调用一次 animate 函数，问题就会得到解决。

试试这个：

var animateOnce = true;
$(window).scroll(function(){
    if($(this).scrollTop() > 50 && animateOnce == true){
        animateOnce = false;
 
        $('.rot-frog').animate({
            'bottom': '-80',
            'right': '-40'
        }, 500);
    }else if($(this).scrollTop() <= 50 && animateOnce == false){
        animateOnce = true;

        $('.rot-frog').animate({
            'bottom': '-12',
            'right': '-6'
        }, 500);
    }
});

【讨论】：