我要怎么才能再按钮的动画完成后再跳转到目标页面
下面是我的代码
$(function () {
button = $('button');
button.click(function (e) {
e.preventDefault();
$(this).toggleClass('active');
});
$(window).resize(function (e) {
button.removeClass('active');
});
});
}
function check(){
if(document.getElementById("usn").value == ""){
// alert("用户名不能为空！");
return false;
}
if(document.getElementById("psd").value == ""){
// alert("密码不能为空！");
return false;
}
document.getElementById("formid").submit();
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/register.css">
<script src="js/jQuery/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/test/default.css" />
<link rel="stylesheet" type="text/css" href="css/test/normalize.css">
<link rel="stylesheet" href="css/test/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/register.js"></script>
<title>登录</title>
</head>
<body>
<div class="box">
<form action="index.html" method="POST" id="formid">
<div id="error_box"></div>
<div class="input_box">
<input type="text" placeholder="请输入账户名" id="usn" />
</div>
<div class="input_box">
<input type="password" placeholder="请输入密码" id="psd" />
</div>
<button type="button" onclick="check()">
<img class="splash" src="images2/watersplash_3.svg" alt="Splash!" />
<img class="splash splash-2" src="images2/watersplash_3.svg" alt="Splash!" />
<img class="sub Submarine" src="images2/sublogo_16.svg" />
<img class="submerge" src="images2/submerge.svg" alt="Water" />
<span class="main-text">
<span class="submit">登录</span>
</span>
<span class="sent-text">
<span class="sent">登录成功！</span>
</span>
</button>
</form>
<div class="foot">
<p>未有账号？</p>
<a href="login.html">去注册</a>
</div>
</div>
</body>
有animationend动画完成事件， 你的代码按照下面的实例改，验证的代码帮你加到按钮事件里面了。帮助到你能点个采纳么，谢谢~
注意：加载你本地资源时，一定要记得去掉<base href="https://www.jq22.com/demo/jquery-but-150527222550/" />这段HTML代码
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<base href="https://www.jq22.com/demo/jquery-but-150527222550/" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3提交按钮动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<!--[if IE]>
<script src="https://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="box">
<form action="index.html" method="POST" id="formid">
<div id="error_box"></div>
<div class="input_box">
<input type="text" placeholder="请输入账户名" id="usn" />
</div>
<div class="input_box">
<input type="password" placeholder="请输入密码" id="psd" />
</div>
<button type="button">
<img class="splash" src="images/watersplash_3.svg" alt="Splash!" />
<img class="splash splash-2" src="images/watersplash_3.svg" alt="Splash!" />
<img class="sub Submarine" src="images/sublogo_16.svg" />
<img class="submerge" src="images/submerge.svg" alt="Water" />
<span class="main-text">
<span class="submit">登录</span>
</span>
<span class="sent-text">
<span class="sent">登录成功！</span>
</span>
</button>
</form>
<div class="foot">
<p>未有账号？</p>
<a href="login.html">去注册</a>
</div>
</div>
<script src='https://www.jq22.com/jquery/jquery-1.10.2.js'></script>
<script type="text/javascript">
$(function () {
button = $('button');
button.click(function (e) {
if (document.getElementById("usn").value == "") {
alert("用户名不能为空！");
return false;
}
if (document.getElementById("psd").value == "") {
alert("密码不能为空！");
return false;
}
e.preventDefault();
$(this).toggleClass('active');
}).find('.sub').on('animationend', function () {//要找到动画最长的对象添加事件
alert('动画完毕')
document.getElementById("formid").submit();//////////提交表单代码放这里
});
$(window).resize(function (e) {
button.removeClass('active');
});
});
</script>
</body>
</html>