如何在Jquery中单击时逐个fadeOut元素并在最后显示一条消息

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="container">
  <div class="element">元素1</div>
  <div class="element">元素2</div>
  <div class="element">元素3</div>
  <div class="element">元素4</div>
</div>
<button id="fadeButton">点击逐个fadeOut</button>
<div id="message" style="display: none;">显示的消息</div>

$(document).ready(function() {
  $("#fadeButton").click(function() {
    // 获取所有要fadeOut的元素
    var elements = $(".element");
    
    // 定义逐个fadeOut的函数
    function fadeOutElement(index) {
      if (index >= elements.length) {
        // 当所有元素都fadeOut完成后显示消息
        $("#message").fadeIn();
      } else {
        // 逐个fadeOut元素
        elements.eq(index).fadeOut(function() {
          // 递归调用fadeOutElement函数
          fadeOutElement(index + 1);
        });
      }
    }
    
    // 调用fadeOutElement函数，从第一个元素开始
    fadeOutElement(0);
  });
});