Javascript/jquery，为什么fadein/fadeout不能工作？

Question

我搜索和查看了很多帖子，看到了很多答案，没有运气地尝试过。

我让它使用jquery彩色动画，但之后我不得不链接另一个我想避免的库。

我尝试了CSS动画，这是我无法工作的，因为当我删除css类时，它就没有机会产生淡出效果。

只有fadein/fadeout效应才不会发生。背景色正确切换。

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转换来实现淡入/淡出效果。

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

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

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

小提琴

Answer 2

试试这个简单的例子

在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')
     } 
 });
});