如何避免jQuery中嵌套div随背景图片一同淡入淡出？

云原生阿岚

2026-8-19

解决背景轮播时内容不跟随淡入淡出的问题

核心问题是你直接给包含内容的容器执行了淡入淡出动画，导致内部所有元素都跟着透明。解决办法是把背景层和内容层分离，只对背景层做动画：

修改步骤：

拆分HTML结构，让背景和内容成为独立容器
通过CSS定位确保内容层始终在背景层上方，不受背景动画影响
调整JS逻辑，仅对背景容器执行淡入淡出和图片切换

修改后的完整代码：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-container" style="width: 600px;height: 400px;position: relative;">
  <!-- 专门承载背景图的容器 -->
  <div id="bg-container"></div>
  <!-- 内容容器，独立于背景动画 -->
  <div id="text">
    <p>How do I get this text to stop fading?</p>
  </div>
</div>

CSS

p {
  padding: 75px 15px 15px 15px;
  text-align: center;
  margin: 0;
  color: #fff; /* 可选，提升文字在背景上的可读性 */
}
#bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
#text {
  position: relative;
  z-index: 10; /* 确保内容始终在背景层之上 */
  width: 100%;
  height: 100%;
}

JavaScript

var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
    var i = 0;
    $("#bg-container").css("background-image", "url(" + images[i] + ")");
    setInterval(function () {
        i = (i + 1) % images.length; // 简化循环逻辑
        $("#bg-container").fadeOut("slow", function () {
            $(this).css("background-image", "url(" + images[i] + ")");
            $(this).fadeIn("slow");
        });
    }, 2000);
});