jQuery 其他颜色条件需要 17 秒才能响应

Question

我已经在我电脑上的每个浏览器上进行了测试。我什至尝试了错误处理，没有发现任何问题。

该脚本非常简单并且可以正常工作，但不太像预期的那样

当你向下滚动时，颜色条会变成红色，但是当你向上滚动时，它应该会变成绿色（这不是真正的概念，但我试图改变代码并选择随机颜色）

发生的事情是它像预期的那样立即将颜色更改为红色，但是当它再次到达顶部并应该将其更改为绿色时，它需要将近 20 秒才能响应。

这是完整的代码

(function(){
    
    "use strict";
    
   $(document).ready(function(){
       
            var advancedNav = $('.navigation').offset().top;

            $(window).scroll(function(){
                if( $(window).scrollTop() > advancedNav ) {
                    $(".navigation").animate({
                        "background-color": "red"
                    }, 1000)
                } 
                else {
                   $(".navigation").animate({
                        "background-color": "green"
                    }, 1000)
                }
            });
    });
    
})();

.navigation {
    
    width: 100%;
    position: fixed;
    overflow: hidden;
    background: rgba(15, 15, 15, 0);
    z-index: 1;
    
}


.navigation ul {
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    
}

.navigation li {
    
    float: left;
    
}

.navigation  li a {
    
    display: inline-block;
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 14px 16px;
    margin-left: 20px;
    width: 50px;
    text-decoration: none;
    font-family: barelFont;
    
}

.navigation  li a:hover {
    background-color: #fff;
    color: #ddd;
}

<header>
    <div class="navigation">
        <ul>
          <li><a href="#everest">Main</a></li>
          <li><a href="#projectsSection">Projects</a></li>
          <li><a href="#aboutSection">About</a></li>
          <li><a href="#contactSection">Contact</a></li>
        </ul> 
    </div>
</header>

我尝试的是尝试使用原始的 jquery css() 方法，它非常有效。

但我希望它动态变化并且看起来不错，所以我尝试使用 Jquery 颜色和 JqueryUI 并且发生了同样的事情。

这里的问题可能是什么原因造成的？

Answer 1

问题的原因是@Taplar 指出的动画队列中添加了太多动画。

我建议改为 CSS 类：

(function(){
    
    "use strict";
    
   $(document).ready(function(){
       
            var advancedNav = $('.navigation').offset().top;

            $(window).scroll(function(){
                if( $(window).scrollTop() > advancedNav ) {
                    $(".navigation").removeClass('green').addClass("red")
                } 
                else {
                   $(".navigation").removeClass('red').addClass("green")
                }
            });
    });
    
})();

body, html {height:100%}
header {height:200%}
.navigation {
    
    width: 100%;
    position: fixed;
    overflow: hidden;
    background-color: rgba(15, 15, 15, 0);
    z-index: 1;
    transition:background-color 1s
    
}
.green {background-color: green}
.red   {background-color: red}


.navigation ul {
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    
}

.navigation li {
    
    float: left;
    
}

.navigation  li a {
    
    display: inline-block;
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 14px 16px;
    margin-left: 20px;
    width: 50px;
    text-decoration: none;
    font-family: barelFont;
    
}

.navigation  li a:hover {
    background-color: #fff;
    color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div class="navigation">
        <ul>
          <li><a href="#everest">Main</a></li>
          <li><a href="#projectsSection">Projects</a></li>
          <li><a href="#aboutSection">About</a></li>
          <li><a href="#contactSection">Contact</a></li>
        </ul> 
    </div>
</header>

jQuery 其他颜色条件需要 17 秒才能响应

jQuery Color else condition takes 17 second to respinse

html

css

jquery

jquery-ui

jquery-color