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

Posted 2023-05-08

【中文标题】jQuery - .animate() 在滚动时非常延迟

【英文标题】：jQuery - .animate() very delayed on scroll

【发布时间】：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() 组合有关，我只是不确定为什么。我试过搜索类似的问题，但找不到我想要的东西。有人可以告诉我为什么会这样吗？

【参考方案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);
    
);