滚动至500px元素淡出，回滚淡入失效问题排查求助

嘿，这个问题我之前也踩过坑！核心原因是scroll事件会被连续频繁触发，每次滚动都会调用animate()，jQuery会把这些动画请求挨个加入到动画队列里。当你滚动超过500px时，一堆淡出动画在排队执行；等你回滚到500px以内时，淡入动画也被不断加入队列，但前面的淡出动画还没跑完，所以你根本看不到元素恢复的效果。

这里给你两个关键修复点，结合起来就能解决问题：

• 在执行新动画前，用stop(true, true)清空动画队列并立刻结束当前动画，让新动画能马上生效
• 加一个状态标记，避免重复执行相同状态的动画，减少不必要的性能消耗

修改后的代码如下：

var $document = $(document), 
    $element = $('#some-element'), 
    className = 'hasScrolled',
    // 标记当前元素是否可见，初始设为true
    isElementVisible = true; 

$document.scroll(function() {
    var currentScrollTop = $document.scrollTop();
    
    if (currentScrollTop >= 500) {
        $element.addClass(className);
        // 只有当前元素可见时，才触发淡出动画
        if (isElementVisible) {
            $("#thePlayer,#playlist").stop(true, true).animate({ 
                opacity: 0 
            }, 2000);
            isElementVisible = false;
        }
    } else {
        $element.removeClass(className);
        // 只有当前元素隐藏时，才触发淡入动画
        if (!isElementVisible) {
            $("#thePlayer,#playlist").stop(true, true).animate({ 
                opacity: 1 
            }, 2000);
            isElementVisible = true;
        }
    }
});

关键细节解释： #

• stop(true, true)：第一个参数true会清空该元素的所有待执行动画队列，第二个参数true会让当前正在运行的动画立刻完成到目标状态，这样新的动画不会被旧队列阻塞，能立刻响应你的滚动操作。
• isElementVisible状态标记：用来判断当前元素的可见状态，避免在同一滚动区间内重复触发相同的动画，既减少了不必要的动画调用，也从根源上防止了队列堆积的问题。

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