Javascript 有没有办法延迟提交表单以执行某些动画

表单应该是滑动的，一个新的div将显示在表单的位置。这里的问题是，当按下“提交”按钮时，动画停止，因此加载下一页。是否有办法延迟表单的提交，以便可以进行动画制作

HTML

<form class=" login myform" action='' method="post" id='frmlogin' name='frmlogin' >
<p class="">
<label for="username" class="">Your email&nbsp;<span class="required">*</span></label>
<input type="email" class=" " name="login_email"
id="login_email" autocomplete="email" value="" size='35' />
</p>
<p class="">
<label for="password" class="">Password&nbsp;<span class="required">*</span></label>
<input class=" " type="password" name="login_password" 
id="login_password" autocomplete="password" size='35'   />
</p>
<p class="form-row">

<button type="submit" class="hello" name="login" value="Log in">Log in</button>
<input type="button" class="hello  " value="LOGIN" style="color:white;background: #c19d56;border:2px double #c19d56;outline: #c19d56 solid 1px;outline-offset: 2px; padding: 15px;width: 200px;cursor: pointer;letter-spacing: .19em;">
</p>

<p class="">
<a href="#">Forgot password?</a>
</p>
</form>
<div class="row w-100 mydiv" style="display:none;background: #c19d56;height: 100px;border-radius: 10px;">
    <br>&nbsp;&nbsp;&nbsp;
    Congratulations you are logged in!!
</div>

提前谢谢

只需使用该方法停止表单提交，并使用事件按如下方式提交表单：

$(".hello").click(function(e){
  e.preventDefault();

  $(".myform").slideUp("slow");
  $(".mydiv").css({display:'block'},"slow");

  $("form.myform").submit();
});

---

是，将登录按钮更改为：

<button type="button" class="hello" name="login" value="Log in">Log in</button>

---

$（.myform”）.slideUp（“slow”，function（）{$（.form.myform”）.submit（）；}）

或者您可以在

slideUp（）

方法的回调中运行submit事件，如上面注释中的@freedomn-m所示。

<button type="button" class="hello" name="login" value="Log in">Log in</button>

$('.hello').click(function() {
    var $form = $('.myform');
    $form.slideUp('slow', function() {
        $('.mydiv').animate({
            'display: 'block'
        }, 'slow', 'linear', function() {
            $form.submit();
        });
    });
});