JQuery fadeIn()/fadeOut()循环切换Logo动画异常求助

我来帮你修复这个动画问题，先拆解下原代码里的几个核心问题：

原代码的关键问题 #

• jQuery选择器错误：你写的$("logo1")是标签选择器，但你的Logo用的是类名，应该改成$(".logo1")
• 重复ID：两个Logo都用了id="logoChange"，ID在页面中必须唯一，这会导致DOM选择和样式应用混乱
• 动画时序混乱：用delay()硬串动画很容易因为计算误差导致Logo重叠，而且没有形成持续循环
• 定位逻辑问题：Logo的绝对定位没有相对父容器做基准，动画过程中容易出现位置偏移

修复后的完整代码 #

HTML（修正重复ID，简化结构） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="logocontainer">
    <img class="logo" src="https://via.placeholder.com/150/?text=logo1" alt="logo1">
    <img class="logo" src="https://via.placeholder.com/150/?text=logo2" alt="logo2">
  </div>
</div>

CSS（优化定位，确保居中稳定） #

.container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.logocontainer {
  position: relative; /* 让内部绝对定位的元素以它为基准 */
  height: 9rem;
  width: 150px; /* 和Logo宽度一致，避免容器无意义拉伸 */
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9rem;
  display: none;
}
/* 默认显示第一个Logo */
.logo:first-child {
  display: block;
}

JavaScript（用动画回调实现无缝循环） #

$(document).ready(function() {
  function toggleLogos() {
    // 获取当前显示/隐藏的Logo
    const $visibleLogo = $(".logo:visible");
    const $hiddenLogo = $(".logo:hidden");
    
    // 先淡出当前Logo，完成后淡入另一个，递归调用形成循环
    $visibleLogo.fadeOut(1000, function() {
      $hiddenLogo.fadeIn(1000, function() {
        // 显示3秒后再次触发切换
        setTimeout(toggleLogos, 3000);
      });
    });
  }
  
  // 初始显示第一个Logo，3秒后启动第一次切换
  setTimeout(toggleLogos, 3000);
});

关键修改说明 #

1. 选择器与ID修正：移除重复ID，统一用.logo类选择器，避免DOM选择混乱
2. 定位优化：给logocontainer设置position: relative，内部Logo用top:0; left:0; width:100%，确保两个Logo完全重叠在父容器内，彻底解决位置偏移问题
3. 动画逻辑重构：用jQuery动画的回调函数衔接淡入淡出，确保前一个动画完全结束后再执行下一个，从根源避免重叠；通过递归调用toggleLogos实现无限循环
4. 时序控制：每个Logo稳定显示3秒，淡入淡出各1秒，整个周期清晰可控，不会出现时序错乱

这样修改后，两个Logo会始终保持居中，无缝交替淡入淡出，完全符合你的需求。

内容的提问来源于stack exchange，提问作者shackleton