javascript - 提交表单后fadeOut和fadeIn不起作用

Question

$('form').submit(function(e) {
  e.preventDefault();
  /*$.ajax({
    type: "POST",
    url: "mailer/smart.php",
    data: $(this).serialize()
  })*/
  $.when(/* just for the Stack Snippet */).done(function() {
    $(this).find("input").val("");
    $('#consultation, #order').fadeOut('slow');
    $('.overlay, #thanks').fadeIn('slow');

    $('form').trigger('reset');
  });
  return false;
});

.overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, .56)
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  min-height: 400px;
  background-color: #f2f2f2;
  padding: 38px 40px 40px 40px
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 41px;
  line-height: 21px;
  color: #c70101;
  cursor: pointer
}

.modal__subtitle {
  color: #0d0d0d;
  font-size: 18px;
  font-weight: 700;
  text-align: center
}

.modal__descr {
  color: #0d0d0d;
  font-size: 14px;
  font-weight: 500;
  text-align: center
}

.modal_mini {
  min-height: 140px
}

.modal .error {
  border: 1px solid red
}

.modal label.error {
  border: none;
  text-align: center;
  margin-bottom: 15px
}

#consultation,
#order,
#thanks {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><button type="submit">Submit form</button></form>
<div class="overlay">
  <div class="modal" id="consultation">
    <div class="modal__close">&times;</div>
    <div class="modal__subtitle">Just fill out the application form</div>
    <div class="modal__descr">and we'll call you back within 10 minutes</div>
    <form class="feed_form feed_form-mt25" action="#">
      <input name="name" placeholder="Your name" type="text">
      <input name="phone" placeholder="Your phone number">
      <input name="email" placeholder="Your email" type="email">

      <button class="button button_submit">Request a consultation</button>
    </form>
  </div>

  <div class="modal" id="order">
    <div class="modal__close">&times;</div>
    <div class="modal__subtitle">Your order:</div>
    <div class="modal__descr">Pulsometer Polar Vantage V</div>
    <form class="feed_form feed_form-mt25" action="#">
      <input name="name" placeholder="Your name" type="text">
      <input name="phone" placeholder="Your phone number">
      <input name="email" placeholder="Your email" type="email">

      <button class="button button_submit">buy</button>
    </form>
  </div>

  <div class="modal modal_mini" id="thanks">
    <div class="modal__close">&times;</div>
    <div class="modal__subtitle">Thank you for your application!</div>
    <div class="modal__descr">Our manager will contact you soon</div>
  </div>
</div>

1. 这是样式，HTML和脚本，脚本必须在提交表单后将#order，#consultation更改为#thanks，但它只会删除表单中的所有数据，仅此而已
2. 我尝试更改样式并阅读了一些信息，但没有成功，似乎所有内容都写得很好，但不知何故它不起作用

标签： javascriptjquery