jQuery使用.scroll()绑定.animate()实现滚动动效出现严重延迟问题

• 动画队列积压：scroll事件的触发频率极高，页面滚动过程中每秒会触发数十次回调，你当前的写法每次触发scroll都会向.rot-frog元素的动画队列中新增一个500ms的动画任务，大量动画任务排队执行就会导致严重的卡顿延迟。
• 未中断旧动画：jQuery的.animate()方法默认会将新动画追加到已有队列后执行，不会主动终止正在运行的动画。哪怕你已经滚动到阈值位置，旧的动画还在执行，新的动画要等队列清空才会触发，就会出现回弹动画不触发的错觉。

快速修复：添加动画队列清空逻辑 #

每次执行新动画前调用.stop(true)清空已有队列、终止当前动画，避免队列积压，修改后代码如下：

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

更优方案：CSS过渡替代JS动画（性能提升明显） #

CSS过渡由浏览器原生渲染线程处理，不会占用JS主线程，流畅度远高于JS实现的动画，搭配节流逻辑可以完全解决卡顿问题：

1. 新增CSS样式：

.rot-frog {
    /* 原有属性保持不变 */
    transition: all 0.5s ease;
}
.rot-frog.scrolled {
    bottom: -80px;
    right: -40px;
}
/* 元素初始状态保持 bottom:-12px、right:-6px 即可 */

2. 修改JS逻辑（添加节流优化减少触发频率）：

let scrollTimer = null
$(window).scroll(function(){
    if(scrollTimer) clearTimeout(scrollTimer)
    scrollTimer = setTimeout(() => {
        $('.rot-frog').toggleClass('scrolled', $(this).scrollTop() > 50)
    }, 100)
})

内容的提问来源于stack exchange，提问作者stinkysGTI