如何实现弹窗5秒后淡入、关闭时淡出？附现有代码

嘿，我来帮你搞定这个弹窗的动画需求！原来的代码是直接显示/隐藏弹窗，我们可以借助jQuery的delay()、fadeIn()和fadeOut()方法，轻松实现延迟淡入和关闭淡出的效果，同时调整代码结构让逻辑更严谨。

修改后的完整JS代码 #

$(function(){
  // 页面加载完成后，延迟5秒以淡入方式显示弹窗和遮罩层
  $('#screen, #modal').delay(5000).fadeIn();
  
  // 点击遮罩层或弹窗按钮时，以淡出方式关闭弹窗和遮罩层
  $('#screen, #modal button').click(function(){
    $('#screen, #modal').fadeOut();
  });
});

关键改动说明 #

• 延迟淡入逻辑：把原来的show()替换成delay(5000).fadeIn()，其中delay(5000)表示等待5000毫秒（即5秒），fadeIn()会让元素以渐变透明的方式显示。你还可以给fadeIn()添加参数调整淡入速度，比如fadeIn(600)就是用600毫秒完成淡入动画。
• 关闭淡出逻辑：把原来的hide()替换成fadeOut()，这个方法会让元素逐渐变为透明后自动隐藏，同样支持自定义速度参数，比如fadeOut(400)。
• 事件绑定优化：把关闭按钮的点击事件移到$(function(){})内部，确保DOM元素完全加载后再绑定事件，避免出现元素未找到的异常。

额外注意事项 #

要确保你的#screen和#modal元素初始状态是隐藏的，需要在CSS中添加：

#screen, #modal {
  display: none;
}

因为fadeIn()需要元素初始为隐藏状态才能正常触发淡入动画哦。

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