如何实现轮播切换时隐藏div的淡入效果？

看起来你遇到的问题是轮播切换后，新激活的幻灯片里的.carousel-holes-title不会自动淡入——你现在的代码只在页面加载时执行了一次fadeIn，但轮播切换后不会自动重复这段逻辑，对吧？

问题根源 #

你的.carousel-holes-title默认是display: none，页面加载时你只给第一个带active类的幻灯片里的这个元素执行了淡入，但轮播切换后，新的active项里的元素还是处于隐藏状态，而且没有触发新的淡入动画。

解决方案 #

我们需要监听Bootstrap轮播的切换完成事件，每次轮播切换结束后自动给当前激活的幻灯片里的标题触发淡入效果，同时修正脚本加载顺序避免冲突。

1. 调整脚本加载顺序

你当前的脚本加载顺序是先Bootstrap JS后jQuery，这会导致jQuery无法正确监听Bootstrap的事件，需要把jQuery放在前面：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 先加载jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- 再加载Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

2. 替换原有脚本，添加事件监听

移除你单独写的那行$(".carousel-inner > .active > .carousel-caption > .carousel-holes-title").fadeIn(10000);，换成下面的代码：

$(document).ready(function() {
  // 页面初始化时，给第一个激活的标题触发淡入
  $(".carousel-inner > .active > .carousel-caption > .carousel-holes-title").fadeIn(10000);

  // 监听轮播切换完成事件（slid.bs.carousel是切换结束后触发，此时active类已更新）
  $("#carouselExampleIndicators").on("slid.bs.carousel", function() {
    // 先重置所有标题的状态：隐藏并停止可能的动画
    $(".carousel-holes-title").stop(true, true).hide();
    // 给当前激活的幻灯片里的标题执行淡入
    $(this).find(".carousel-inner > .active > .carousel-caption > .carousel-holes-title").fadeIn(10000);
  });
});

3. 为什么这么做？

• slid.bs.carousel是Bootstrap Carousel提供的官方事件，会在轮播切换完成后触发，此时新的幻灯片已经加上了active类，能准确找到目标元素。
• 用stop(true, true)是为了停止之前可能未完成的淡入/淡出动画，避免多个动画叠加导致的显示异常。
• 初始化时手动触发一次淡入，保证页面加载时第一个标题能正常显示。

保留你的原有CSS #

你的CSS样式不需要修改，.carousel-holes-title的display: none初始状态是对的，淡入动画会自动把它改成display: block。

内容来源于stack exchange