使用setInterval实现淡入淡出动画（显示/隐藏）的异常问题

你遇到的这个问题我之前也碰到过，本质是setInterval的定时机制和jQuery异步动画之间的冲突。setInterval会不管上一次的代码有没有执行完，到点就触发回调，一旦浏览器有轻微的渲染延迟，几次循环后动画队列就会堆积，最终导致所有元素同时淡入淡出的混乱情况。

先分析下你现有代码的问题：你用setInterval每3秒触发一次，内部的fadeOut(1000) + setTimeout(1000) + fadeIn(1000)刚好凑够3秒，看似完美对齐，但浏览器的动画执行不是绝对精准的，微小的延迟积累几次后，定时器就会和动画不同步，叠加出问题。

解决方案：用动画回调+递归替代setInterval #

改用这种方式后，每一步操作都要等当前动画完全完成才会执行下一个，从根本上避免队列堆积的问题。下面是修改后的完整代码：

JavaScript代码

$(function() {
  // 初始化：隐藏所有h1，缓存元素集合（避免重复DOM查询）
  const $texts = $('#animate-text h1').hide();
  let currText = 0;
  
  // 定义轮播核心函数
  function rotateText() {
    // 先让当前元素淡出，淡出完成后执行回调
    $texts.eq(currText).fadeOut(1000, function() {
      // 更新当前索引，用取模运算简洁实现循环到首个元素
      currText = (currText + 1) % $texts.length;
      // 让下一个元素淡入，淡入完成后再延迟启动下一轮
      $texts.eq(currText).fadeIn(1000, function() {
        // 这里的1000ms是元素显示的时长，可根据需求调整
        setTimeout(rotateText, 1000);
      });
    });
  }
  
  // 初始化显示第一个元素，然后启动轮播
  $texts.eq(currText).fadeIn(1000, function() {
    setTimeout(rotateText, 1000);
  });
});

HTML代码（注意同步jQuery版本）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='animate-text'>
    <h1>text1</h1>
    <h1>text2</h1>
</div>

关键修改点说明 #

• 用$(function() { ... })包裹代码，确保DOM完全加载后再执行操作，避免找不到元素的问题。
• 缓存$texts集合，避免每次循环都重新查询DOM，提升性能。
• 依赖jQuery动画的回调函数控制流程，确保上一个动画完成后才进行下一步，彻底解决定时器叠加问题。
• 用(currText + 1) % $texts.length替代原有的条件判断，代码更简洁健壮，哪怕后续增加更多h1元素也不用修改这部分逻辑。
• 同步了你实际使用的jQuery 3.2.1版本，避免版本不一致导致的潜在兼容问题。

额外优化建议 #

• 如果想调整元素的显示时长，只需要修改fadeIn回调里setTimeout的延迟时间即可（比如设置2000ms就是显示2秒）。
• 可以添加一个暂停/继续功能，比如定义一个isRotating变量，在rotateText开头判断是否继续执行，方便交互控制。

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