Javascript 在滚动上执行addClass或removeClass时，如何添加fadein或fadeout动画

我基本上是想在有滚动条的情况下，用下面的jquery更改Bootstrap4NavBar的类，但这似乎不起作用

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 100) {
    $(".navbar")
      .removeClass("navbar-dark")
      .fadeOut("fast");
    $(".navbar")
      .addClass("navbar-light bg-light")
      .fadein("slow");
  } else {
    $(".navbar")
      .removeClass("navbar-light bg-light")
      .fadeOut("fast");
    $(".navbar")
      .addClass("navbar-dark")
      .fadein("slow");
  }
});

jQuery函数有一个持续时间和一个完整的参数。complete参数可以是一个函数，在淡出完成时调用该函数。通过这种方式，您可以在淡出完成后执行一些操作，如执行所需的淡出

请参见下面的示例

var $navbar = $(".navbar");
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 100) {
    $navbar
      .removeClass("navbar-dark")
      .stop(true, true)
      .fadeOut("fast", function() {
        $navbar
          .addClass("navbar-light bg-light")
          .fadeIn("slow");
      });
  } else {
    $navbar
      .removeClass("navbar-light bg-light")
      .stop(true, true)
      .fadeOut("fast", function() {
        $navbar
          .addClass("navbar-dark")
          .fadeIn("slow");
      });
  }
});

但我鼓励使用CSS转换来实现这一目的，因为它们比jQuery淡入淡出更容易使用，而且最重要的是，性能更高

编辑 正如Roko所建议的，您应该使用该功能来停止元素上正在运行

fadeIn

或

fadeOut

的任何当前动画

• 你不需要两门课。只有默认样式和特殊类
• 不要使用jQuery制作动画，而是使用
• 使用方法
• 缓存选择器元素！你能做的最糟糕的事情就是在每个滚动条上查询整个DOM来搜索一个.class元素-这是一个太昂贵的操作

const$navbar=$（'.navbar'）；//缓存你的元素！！
$（窗口）.on（'scroll'，function（）{
const st=$（window.scrollTop（）；
$navbar.toggleClass（'is-scrolled'，st>=100）；
});
正文{
保证金：0；
高度：300vh；/*演示强制滚动条*/
}
/*默认样式*/
navbar先生{
位置：粘性；
排名：0；
宽度：100%；
过渡：0.4s；
背景：金；
}
/*滚动样式*/
.navbar.is-scrolled{
背景：#888；
}
navbar向下滚动。。。
滚动时，您将触发多次调用
.fadeOut（）
和
.fadeIn（）
，这可能会导致动画问题。简单地切换一个改变不透明度的类（0到1，反之亦然）怎么样？我可以问一下为什么
fadeIn
和
fadeOut
？（顺便说一句，它是
fadeIn
，而不是
fadeIn
——使用控制台来发现这些简单的错误）正如您所说，它可能会导致错误。您应该使用
.stop（）
来防止动画生成。顺便说一句，我们不应该再使用jQuery来制作动画（比如
fadeIn/fadeOut
），相反，我们应该只分配一个类，让浏览器为我们进行CSS3
转换。另外，它是
fadeIn
而不是
fadeIn
-谢谢，但我为什么要编辑你的答案？你能做到的，来吧。
.stop（true，true）
，实际上
。stop（）
已经足够了。如果我需要在两个类之间切换呢？如果你足够幸运，可以使用SCSS预处理器-@在默认值内扩展这些修饰符，而不是污染HTML类列表，那么我将引导与两组navbar类（navbar light bg light）和（navbar dark）一起使用。（如果您不介意使用更重一点的CSS文件），或者使用jQuery，比如
.toggleClass（'class-a class-b'