如何实现随机追加div后单个元素的延迟淡入淡出效果？

我明白你遇到的困扰了——之前的代码把所有通知的动画一次性绑定，导致它们的延迟计时同时启动，自然会同步淡入淡出。咱们换个思路，逐个处理随机选取的通知，让每个通知的动画独立触发，就能实现你想要的效果了。

核心思路 #

1. 先把所有.notification元素克隆后存入数组（避免直接移动原DOM元素导致的页面结构混乱）；
2. 写一个递归函数，每次从数组里随机挑一个通知，追加到#result容器；
3. 给刚追加的通知单独绑定淡入淡出动画，淡出完成后还可以选择自动触发下一个通知（按需调整）。

完整代码示例 #

// 克隆所有.notification元素并存入数组（保留原DOM元素的位置）
let notifications = Array.from(document.querySelectorAll('.notification')).map(el => el.cloneNode(true));

// 定义处理单个随机通知的函数
function showRandomNotification() {
  // 数组为空时停止执行
  if (notifications.length === 0) return;

  // 随机选取数组中的一个元素并从数组移除
  const randomIdx = Math.floor(Math.random() * notifications.length);
  const currentNote = notifications.splice(randomIdx, 1)[0];

  // 先设置为隐藏状态，为淡入动画做准备
  currentNote.style.display = 'none';
  document.getElementById('result').appendChild(currentNote);

  // 为当前通知绑定独立的淡入淡出动画
  $(currentNote).fadeIn(400)
    .delay(3000)
    .fadeOut(400, function() {
      // 淡出完成后可选择移除元素，也可以保留在DOM中
      $(this).remove();
      // 自动触发下一个通知（如果不需要连续显示，注释掉这行即可）
      showRandomNotification();
    });
}

// 启动第一个随机通知的展示
showRandomNotification();

为什么之前的代码会同步？ #

你之前的写法应该是一次性把所有随机排序后的通知都追加到容器，再批量调用动画方法。这会导致所有通知的delay(3000)从同一时间开始计时，3秒后自然集体淡出。而上面的方法是每个通知的动画都在它被追加到DOM后才开始独立计时，完全互不干扰，自然不会出现同步问题。

如果不需要连续自动显示，只是一次性随机追加所有通知但让每个动画独立，你也可以用循环结合setTimeout错开每个通知的追加时间，但递归的方式会更灵活可控~

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