如何为弹窗添加jQuery FadeIn与FadeOut淡入淡出效果？

嘿，这个需求很容易实现，我来一步步帮你改造代码，让弹窗拥有平滑的淡入淡出动画：

第一步：确保加载jQuery库 #

首先得确认你的页面已经引入了jQuery——这是使用它的动画方法的前提。你可以通过本地文件引入，或者使用官方的CDN资源（这里不提供外链，你可以自行搜索获取）。

第二步：调整遮罩层的初始CSS #

原来的代码是直接修改display属性来显示/隐藏弹窗，但jQuery的fadeIn()和fadeOut()需要元素初始处于隐藏状态才能生效。所以先给你的myOverlay添加初始隐藏样式：

#myOverlay {
  display: none; /* 默认隐藏，让fadeIn能正常触发 */
  /* 保留你原来的其他样式，比如定位、背景色等： */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

第三步：修改弹窗控制函数 #

把原来的原生JS替换成jQuery的动画方法，代码会更简洁，还能直接实现淡入淡出：

function openPopUp() {
  // fadeIn()参数是动画时长（毫秒），可自定义，比如500就是半秒完成淡入
  $('#myOverlay').fadeIn(500);
}

function closePopUp() {
  // 同理，fadeOut()控制淡出时长
  $('#myOverlay').fadeOut(500);
}

额外小技巧：动画完成后的回调 #

如果你想在淡入/淡出动画结束后执行一些操作（比如聚焦弹窗内的输入框），可以给方法加个回调函数：

function openPopUp() {
  $('#myOverlay').fadeIn(500, function() {
    // 动画完成后执行的代码，示例：
    document.getElementById('popupInput').focus();
  });
}

这样改完之后，你的弹窗打开时会平滑淡入，关闭时自然淡出，比生硬的显示/隐藏体验好太多啦～

内容的提问来源于stack exchange，提问作者John smith FN