jQuery多元素动画效果同步触发问题排查及依次淡入淡出实现方案咨询

问题原因 #

你当前的代码里，$("#first") 和 $("#second") 是两个完全独立的DOM元素，它们各自拥有专属的jQuery动画队列。当你同时触发两个元素的动画方法时，两个队列会同步启动，所以两个元素的淡入淡出效果会同时进行。

而你尝试的 dequeue() 和 stop() 方法，都是用来操作单个元素自身的动画队列的——dequeue() 是执行当前元素队列里的下一个动画，stop() 是停止当前元素的正在执行的动画，它们没法跨元素控制执行顺序，所以自然起不到你想要的效果。

合适的实现方式 #

下面提供几种可靠的解决方案，你可以根据场景选择：

1. 利用动画回调函数（最简单直接）

jQuery的动画方法（比如fadeIn、fadeOut）支持传入回调函数，这个函数会在当前动画完全结束后触发。我们可以把第二个元素的动画逻辑放在第一个元素的fadeOut回调里，实现顺序执行：

$(() => {
  $("#first")
    .fadeIn(2000)
    .delay(3000)
    .fadeOut(2000, () => {
      // 第一个元素淡出完成后，启动第二个元素的动画流程
      $("#second")
        .fadeIn(2000)
        .delay(3000)
        .fadeOut(2000);
    });
});

2. 使用全局队列控制顺序（适合多元素场景）

如果后续需要添加更多元素的动画，可以创建一个空对象的队列，把每个元素的动画任务依次加入队列，确保严格按顺序执行：

$(() => {
  // 创建一个空的jQuery对象来承载全局队列
  $({})
    .queue(function(next) {
      // 第一个元素的动画，完成后调用next()执行下一个队列任务
      $("#first").fadeIn(2000).delay(3000).fadeOut(2000, next);
    })
    .queue(function(next) {
      // 第二个元素的动画
      $("#second").fadeIn(2000).delay(3000).fadeOut(2000, next);
    });
});

3. Promise + async/await（现代写法，可读性强）

把单个元素的动画包装成Promise，再用async/await来实现顺序执行，这种写法更符合现代JavaScript的风格，也更容易维护和扩展：

$(() => {
  // 封装动画为Promise
  const animateElement = (selector) => {
    return new Promise(resolve => {
      $(selector).fadeIn(2000).delay(3000).fadeOut(2000, resolve);
    });
  };

  // 按顺序执行动画
  async function runAnimations() {
    await animateElement("#first");
    await animateElement("#second");
  }

  runAnimations();
});

完整测试代码 #

把上述任意一种JavaScript代码替换你原来的脚本，配合HTML和jQuery引入即可正常运行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="first" style="display: none;">First</h1>
<h1 id="second" style="display: none;">Second</h1>

内容的提问来源于stack exchange，提问作者David Malášek