Javascript 带有add/removeClass的导航菜单动画

我是JS/jQuery新手，这是我第一次为导航栏制作动画。
在学习了addClass/removeClass函数之后，我遇到了下一个挑战
我不允许它淡入/淡出addClass/removeClass元素<也许有人能帮我：-）

我使用removeClass/addClass是因为我想更改滚动菜单中的颜色/图像。 我正在使用的导航菜单应该与他们的类似：

---

除了fadeIn/fadeOut，我的一切都正常工作。

我尝试了更多，找到了一个解决方案：

.colorfade {
  height:100px;
  width: 100%;
  position: absolute;
  background-color: white;
  position: fixed;
  display: none;
  z-index: -1;
}


    $(window).scroll(function(){                          
        if ($(this).scrollTop() > 80) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt");
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
            $('.colorfade').fadeIn(500);
        } else {
            $('.navbar').removeClass("navbar-alt").addClass('.navbar').fadeIn(500);
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
            $('.colorfade').fadeOut(500);
        }
    });
});

---

首先我要说的是，当用户使用鼠标滚轮或触摸幻灯片时，滚动事件是一个快速重复的事件，所以你不应该频繁地添加和删除类，每个滚动事件都没有意义！因此，除了滚动位置之外，我还添加了一个标准，用于测试以前是否设置了

navbar

或

navbar alt

类

对于颜色渐变效果，不需要添加单独的块。您可以使用css转换，以便在更改类时，样式按css效果显示：

$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>80&&$（'.navbar'）.hasClass（“navbar”））{
$（'.navbar'）.removeClass（'.navbar'）.addClass（“navbar alt”）；
$（'.logo-ate'）.removeClass（'.logo-ate'）.addClass（“logo-ate-alt”）；
$（'.links'）.removeClass（'.links'）.addClass（“links-alt”）；
$（'.menu'）.removeClass（'.menu'）.addClass（“menu-alt”）；
}
如果（$（this）.scrollTop（）是
navbar
隐藏的，您想使用
fadeIn
？我想这就是问题所在，navbar不会隐藏，因为它会随着淡入而更改颜色和图像。fadeIn（）当一个元素被隐藏并且你想用淡入淡出效果来显示它时使用。在这种情况下，不需要显示/隐藏效果。我想只有更改类就足够了。请提供类的详细信息以检查它们的功能。有没有方法淡入背景色？这也可以解决我的问题。从0不透明度到1。而不是添加新的el对于颜色褪色，您可以使用css转换来处理
navbar
本身。我需要滚动上的转换，您能给我一个例子说明它应该如何工作，因为我从未使用过css转换吗？
.colorfade {
  height:100px;
  width: 100%;
  position: absolute;
  background-color: white;
  position: fixed;
  display: none;
  z-index: -1;
}


    $(window).scroll(function(){                          
        if ($(this).scrollTop() > 80) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt");
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
            $('.colorfade').fadeIn(500);
        } else {
            $('.navbar').removeClass("navbar-alt").addClass('.navbar').fadeIn(500);
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
            $('.colorfade').fadeOut(500);
        }
    });
});