如何在单击submit按钮几秒钟后显示div，然后消失？

<div id="container">
  <form>
    <input type="submit" value="Submit" id="submitBtn">
  </form>
  <div id="messageDiv">This is the message to be displayed.</div>
</div>

#messageDiv {
  display: none; /* 初始状态隐藏div */
  animation: fadeOut 2s forwards; /* 设置动画效果，2秒后消失 */
}

@keyframes fadeOut {
  0% { opacity: 1; } /* 动画开始时完全不透明 */
  100% { opacity: 0; } /* 动画结束时完全透明 */
}

document.getElementById("submitBtn").addEventListener("click", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为

  document.getElementById("messageDiv").style.display = "block"; // 显示div

  setTimeout(function() {
    document.getElementById("messageDiv").style.display = "none"; // 2秒后隐藏div
  }, 2000);
});