Javascript/jquery，为什么我的fadein/fadeout不起作用？

我已经搜索并浏览了很多帖子，看到了很多答案，但都没有成功

我用jquery彩色动画制作了它，但是我必须链接另一个我想避免的库

我尝试了CSS动画，但我无法制作，因为当我删除CSS类时，它没有机会制作淡出效果

只有淡出/淡出效应不会发生。背景色切换正确

TL；DR：当访问者从顶部滚动X数量时，希望我的顶部导航栏从透明背景变为白色背景，然后当访问者接近页面顶部时，返回透明，具有平滑过渡效果

$(document).ready(function(){

  $(document).scroll(function(){

    if ($(this).scrollTop() > 200) {

      if ($("#topnav").hasClass('transparent')){

        $("#topnav").removeClass('transparent');

        $("#topnav").addClass('black').fadeIn(1000);

      }

    } else if ($(this).scrollTop() < 200) {

      if ($('#topnav').hasClass('black')){

        $('#topnav').removeClass('black');

        $('#topnav').addClass('transparent').fadeIn(1000);

      }

    }
  });
});

$（文档）.ready（函数（）{
$（文档）。滚动（函数（）{
如果（$（this）.scrollTop（）>200）{
if（$（“#topnav”）.hasClass（'transparent'））{
$（“#topnav”）.removeClass（'transparent'）；
$（“#topnav”）.addClass（'black'）.fadeIn（1000）；
}
}else if（$（this）.scrollTop（）<200）{
if（$（'#topnav'）.hasClass（'black'））{
$（'topnav'）.removeClass（'black'）；
$（'topnav'）.addClass（'transparent'）.fadeIn（1000）；
}
}
});
});

---

为什么这不起作用？

您可以简单地用CSS设置背景色，并使用CSS转换来实现淡入/淡出效果

.box {
    background-color: black;
    -webkit-transition: background-color 2s;
    transition: background-color 2s;
}

在Javascript中，您可以设置颜色：

if ($(this).scrollTop() > 200) {
    $("#topnav").css({"background-color", "yellow"});
}

---

试试这个简单的例子

在CSS文件中

.transparent-background {
  background-color: transparent;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

.black-background {
  background-color: black;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

在js文件中，只需在将透明背景类附加到topNav容器之前添加类

$(document).ready(function(){
  $(document).scroll(function(){
     if ($(this).scrollTop() > 200) {
         $("#topnav").removeClass("transparent-background").addClass('black-
                background')      
     } else {
        $("#topnav").removeClass("black-
                background").addClass('transparent-background')
     } 
 });
});

---

可能与接受的答案重复：“纯jQuery没有设置颜色动画的功能。您必须使用jQueryUI或jQuery颜色插件。”