该表单应该向上滑动,并且新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>


jQuery的

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


提前致谢!!

最佳答案

是的,将登录按钮更改为:

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


并使用以下jQuery提交表单:

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

10-05 20:58
查看更多