jQuery隐藏/显示只是瞬间的，我怎样才能使它们与我的旋转木马过渡？

Question

我对编码和编程非常陌生，但我正在尝试学习一些web开发工具。我尝试让引导轮播触发旁边的文本更改，并成功(参见下面的代码)。但我也希望它具有与旋转木马相同的过渡属性，即1.5s淡出和淡入。但是，我只能让div (具有不同的文本)瞬间出现和消失。如果我添加了任何jQuery fade()或slide()，它将表现为我正在按一个指向carousel-ID的链接。

这是我为div触发隐藏/显示的代码。我只从脚本的顶部开始，但尝试了一下第二部分，看看是否可以得到不同的结果。

$("#carouselExampleIndicators").on('slide.bs.carousel', function(event){
    let image = (event.to);
    if (image == 1)  {
      $("#header-1").hide();
      $("#header-3").hide();
    }
    else if (image == 2)  {
      $("#header-1").hide();
      $("#header-2").hide();
    }
    else {
      $("#header-2").hide();
      $("#header-3").hide();
    }
  });
$("#carouselExampleIndicators").on('slid.bs.carousel', function(event){
    let image = (event.to);
    if (image == 1)  {
      $("#header-2").show();
    }
    else if (image == 2)  {
      $("#header-3").show();
    }
    else {
      $("#header-1").show();
    }
  });
</script>

有什么建议吗？

Answer 1

我尝试了jQuery的另一个链接，似乎解决了这个问题:)！

编辑:以前的jQuery：https://code.jquery.com/jquery-3.3.1.slim.min.js新建和工作jQuery：https://code.jquery.com/jquery-3.5.1.js

脚本现在看起来像这样，并且运行得很流畅。

$("#carouselExampleIndicators").on('slide.bs.carousel', function(event){
let image = (event.to);
if (image == 1)  {
  $("#header-1").fadeOut(500, function() {
  $("#header-2").fadeIn(500);
  });
  $("#header-3").hide();
}
else if (image == 2)  {
  $("#header-1").hide();
  $("#header-2").fadeOut(500, function() {
  $("#header-3").fadeIn(500);
  });
}
else {
  $("#header-2").hide()
  $("#header-3").fadeOut(500, function() {
  $("#header-1").fadeIn(500);
  });
}

})；