如何用纯JavaScript为脚本添加淡入效果？fadeIn函数放置位置咨询

首先，我先把你提供的fadeIn函数补全完整（原代码里的requestAnimationFrame调用没写完，而且缺少关键的display设置——模态框默认一般是隐藏的，不先显示的话透明度变化看不到）：

function fadeIn(el) {
  el.style.opacity = 0;
  el.style.display = 'block'; // 先让元素从隐藏变为显示，不然透明度变化无效
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    // 用requestAnimationFrame保证动画流畅，降级到setTimeout兼容旧浏览器
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

接下来，这个函数的放置位置遵循一个核心原则：必须在任何调用它的代码之前被定义，同时要配合DOM的加载时机。我给你几个最可靠的放置方案：

方案1：全局定义（最灵活） #

把fadeIn函数放在页面头部的<script>标签里，或者外部JS文件的最顶部，让它成为全局可访问的工具函数。这样任何地方的代码都能调用它，比如：

<head>
  <style>
    /* 模态框初始样式：隐藏 */
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 2rem;
      background: #fff;
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }
  </style>
  <script>
    // 先定义fadeIn函数，全局可用
    function fadeIn(el) {
      // 完整代码如上
    }
  </script>
</head>
<body>
  <button id="open-modal-btn">打开模态框</button>
  <div id="my-modal" class="modal">这是你的模态框内容</div>

  <script>
    // 页面底部，DOM元素已加载完成，绑定触发事件
    const openBtn = document.getElementById('open-modal-btn');
    const modal = document.getElementById('my-modal');

    openBtn.addEventListener('click', () => {
      // 调用全局的fadeIn函数
      fadeIn(modal);
    });
  </script>
</body>

方案2：放在DOMContentLoaded事件内（封装性更好） #

如果你不想让函数暴露在全局，可以把它放在DOMContentLoaded事件监听函数里，同时确保调用代码也在同一个作用域内：

document.addEventListener('DOMContentLoaded', () => {
  // 在DOM加载完成后定义函数
  function fadeIn(el) {
    // 完整代码如上
  }

  // 获取模态框和触发按钮
  const modal = document.getElementById('my-modal');
  const openBtn = document.getElementById('open-modal-btn');

  // 绑定点击事件，直接调用同作用域内的fadeIn
  openBtn.addEventListener('click', () => {
    fadeIn(modal);
  });
});

关键注意事项 #

• 模态框的初始状态必须是display: none（或者至少在调用fadeIn前是隐藏的），否则动画效果不明显。
• 不要把调用fadeIn的代码放在DOM加载完成前（比如直接写在head里），否则会找不到模态框元素——要么用DOMContentLoaded监听，要么把调用代码放在页面底部</body>标签前。

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