Javascript 如何做动画的CSS N秒，然后继续路由？_Javascript_Jquery_Html_Css

Javascript 如何做动画的CSS N秒，然后继续路由？

javascript jquery html css

Javascript 如何做动画的CSS N秒，然后继续路由？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个login.html，它将在正确的凭证后重定向到index.html。post和身份验证在后端工作，因此无需担心现在的问题是，提交后，浏览器将只打开static/jquery.min.js-这很有意义，因为我的login.js如下所示（取自一个示例）： e.preventDefault（）我假设覆盖了我的帖子，如下代码所示： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

我有一个login.html，它将在正确的凭证后重定向到index.html。post和身份验证在后端工作，因此无需担心

现在的问题是，提交后，浏览器将只打开

static/jquery.min.js

-这很有意义，因为我的

login.js

如下所示（取自一个示例）：

e.preventDefault（）我假设覆盖了我的帖子，如下代码所示：
 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="static/prefixfree.min.js"></script>
    <script type="text/javascript" src='static/jquery.min.js'></script>
    <script type="text/javascript" src="static/login.js"></script>
        <link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
        <meta charset="UTF-8">
        <title>Super title!</title>

    <style>
        <A bunch of css goes here>
    </style>



</head>
<body>
<div class="login">
    <header class="login-header"><span class="text">LOGIN</span><span class="loader"></span></header>
    <form class="login-form" action="/loginp" method="post">
        <label><input class="login-input" type="text" name="username"/></label>
        <label><input class="login-input" type="password" name="password"/></label>
        <button class="login-btn" type="submit">login</button>
    </form>
</div>
</body>
</html>


超级标题！
登录
登录

我的问题是：如何更改login.js jQuery文件，使其不覆盖/loginp post操作，而是在该操作上设置动画2秒，然后停止
仅在本地运行该示例确实可以处理动画，但当然它会进入一个无休止的循环，这对于实际应用程序来说显然是不需要的：）
使用setTimeout（function（）{//redirection code}，3000）以在3秒钟后重定向。使用任何其他适合您需要的毫秒数
更新
这是基于您的小提琴的工作示例：
代码是
$('.login-input').on('focus', function() {
  $('.login').addClass('focused');
});

function doOnSubmit(e) {
   e.preventDefault();
   $('.login').removeClass('focused').addClass('loading');
   setTimeout(function(){
       $('.login-form').submit()
   },3000); // here you set this function to be executed after 3 seconds.
   $('.login').unbind("submit", doOnSubmit); 
   // this gets executed inmediatly and unbinds the actual behaviour, 
   //as you're going to redirect the user to another page it should be no problem
}
$('.login').on('submit', doOnSubmit);

像这样的？在第一次提交时（用户手动），它只显示动画（将变量设置为true），因此当代码再次触发它时，动画为true，因此它执行路由
var animationStarted = false;
$('.login').on('submit', function(e) {
  if (!animationStarted) {
    e.preventDefault();
    animationStarted = true;
    $('.login').removeClass('focused').addClass('loading');
    setTimeout(function() {
      $('.login').submit();
    }, 3000);
  }
});

但是preventDefault将从现在起覆盖路由-那么我如何更改login.js以适应这一点呢？我需要手动输入jQuery代码的路由吗？：）我已经这样编辑过：
并在有“#formID”的地方添加了“#loginform”，但当您按enter键时，它再次只打开jquery.min.js文件-在提交（单击）时，它确实加载下一页，但没有动画。@cbll再次更新，请现在重试我尝试了您的新代码。不幸的是，这是同样的行为。填写表单并按“Enter”=打开login.js。按此按钮将加载下一页，否则将加载下一页。@cbll请试用。我更新了一个不起作用的答案，我的错误。如果您想更改重定向的实际页面，请修改表单
元素的操作属性。我通过单击播放和回车对其进行了测试，它在3秒钟后进行了动画和重定向。我不明白您在做什么。当您刚刚更改css属性时，为什么需要e.PreventDefault（）？您需要使用它通过ajax发布表单，而不是提交表单的正常行为。为什么要延迟提交？对我来说似乎不方便user@charlietfl我猜他想在提交时在表单上显示动画，并且仅在显示动画后才进行提交。使用ajax很容易吗？@charlietfl我想做一些类似于JSFIDLE的事情，在1.5秒左右的时间后，加载它现在应该和将要加载的页面（没有jquery代码），您不应该使用这样的全局变量，对于不作为参数传递变量的函数，决不应该修改全局变量状态，而是通过scope.JSfiddle在此访问它们。。。执行输入，它将生成动画：）
var animationStarted = false;
$('.login').on('submit', function(e) {
  if (!animationStarted) {
    e.preventDefault();
    animationStarted = true;
    $('.login').removeClass('focused').addClass('loading');
    setTimeout(function() {
      $('.login').submit();
    }, 3000);
  }
});