jQuery Color else 条件需要 17 秒才能响应答案

【问题标题】：jQuery Color else condition takes 17 second to respinsejQuery Color else 条件需要 17 秒才能响应
【发布时间】：2018-01-23 23:41:02
【问题描述】：

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

脚本很简单，它可以工作，但不像它应该的那样

当您向下滚动时，该栏会将颜色更改为红色，但当您向上滚动时，它应该将其更改为绿色（这不是真正的概念，但我尝试更改代码并选择随机颜色）

发生的情况是它会立即将颜色变为红色，就像它应该做的那样，但是当它再次到达顶部并应该将其变为绿色时，它需要将近 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 Color 和 JqueryUI 进行了尝试，同样的事情正在发生。

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

【问题讨论】：

您可能正赶上动画队列到达最终动画所需的时间。你的第一个 if 逻辑没有考虑它是否已经动画为红色。滚动事件触发 a ton。我建议限制处理程序，并可能添加一些方法来知道您已经将动画设置为红色，并且在再次完成/需要之前不要启动另一个红色动画。
我不会过多考虑动画队列，因为命令非常简单，而且公平地说它之前确实有效。我没有考虑在将颜色更改为红色后立即强制它停止，但它现在可以工作了。非常感谢你在这里真的帮助了我

标签： jquery html css jquery-ui jquery-color

【解决方案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>

【讨论】：