Javascript/jquery，为什么我的淡入/淡出不起作用？

Question

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

我用 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);

      }

    }
  });
});

为什么这行不通？

Answer 1

可以简单的用CSS设置背景色，使用CSS transition实现淡入/淡出效果。

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

在 Javascript 中你可以设置颜色:

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

jsfiddle