该表单应该向上滑动,并且新div将显示在该表单的位置。这里的问题是,按下提交时动画停止,因此它将加载下一页。有没有一种方法可以延迟提交表单,以便可以进行动画处理。
的HTML
<form class=" login myform" action='' method="post" id='frmlogin' name='frmlogin' >
<p class="">
<label for="username" class="">Your email <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 <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>
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();
});
});
});