星軌ᝰ 2021-06-27 13:40 采纳率: 55.6%
浏览 113
已采纳

我要怎么才能再按钮的动画完成后再跳转到目标页面

CSS3提交按钮动画特效 (jq22.com)

下面是我的代码

$(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>
  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-06-27 14:36
    关注

    有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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 python验证码滑块图像识别
  • ¥15 QT6颜色选择对话框显示不完整
  • ¥20 能提供一下思路或者代码吗
  • ¥15 用twincat控制！
  • ¥15 请问一下这个运行结果是怎么来的
  • ¥15 单通道放大电路的工作原理
  • ¥30 YOLO检测微调结果p为1
  • ¥15 DS18B20内部ADC模数转换器
  • ¥15 做个有关计算的小程序
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）