代码之家 › 专栏 › 技术社区 › Miles Miller

jQuery Color else条件需要17秒才能重新设置

jquery-color jquery-ui css html jquery

Miles Miller · 技术社区 · 8 年前

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

这个脚本很简单,可以工作,但不太像预期的那样

当你向下滚动时,条会将颜色更改为红色,但当你向上滚动时,它应该将颜色更改为绿色(这不是真正的概念,但我尝试更改代码并选择了随机颜色)

结果是,它会像预期的那样立即将颜色变为红色,但当它再次触顶并将其变为绿色时,几乎需要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进行了尝试,同样的事情也发生了。

这里出现问题的原因是什么?

1 回复 | 直到 8 年前

Kosh 8 年前

问题的原因是,正如@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>