上提交延迟页变化 - jQuery的

页眉上提交延迟页变化 - jQuery的

$(document).ready(function() { 
     $('#user_box').animate({width: "263px"}, "slow"); 

     $('#submit').click(function(){ 
      $('#user_box').animate({width: "0px"}, "slow"); 
     }); 
    });

内容

  <div id="user_box"> 
       <form name="login_form" id="login_form" method="post" action="index.php"> 
        Username:<br /> 
        <input type="text" name="username"><br /> 
        <input type="submit" value="Submit" id="submit" /> 
       </form> 
      </div>

正如你所看到的，我做了点击提交时是做什么，user_box以动画方式返回0pxs（幻灯片对）。问题是我需要延迟大约1秒的页面加载时间来完成动画。但只有在点击提交按钮时。我如何推迟页面以允许动画完成？

我试过..

 $('#submit').delay(3500, function(){ 
      window.location = toLoad; 
     });

没有快乐。任何帮助将不胜感激。谢谢。

p.s.总体思路是，user_box随每个查询滑动并返回结果。它主要是PHP，因此在页面上从右向左滑动。我稍后会纠正一些事情，以便在登录时或停止时发生。

来源

2010-09-18 FabienO

最可靠和灵活的方式做到这一点是使用complete callbac在$().animate调用-k选项：

$('#btn_submit').click(function(e){ 
    $submit = $(this); 

    e.preventDefault(); // prevent the form from being submitted until we say so 

    $('#user_box').animate(
     { width: "0px" }, 
     { 
      duration: "slow", 
      complete: function(){ //callback when animation is complete 
       $submit.parents('form').submit(); 
      } 
     } 
    ); 
});

请注意，我已经改变了提交按钮的id。您不应将表单元素作为表单属性的名称。

中查看选项的jQuery $().animate() API：http://api.jquery.com/animate/

来源

2010-09-18 11:28:03 lonesomeday

谢谢你，就像一个魅力。现在我们来简单地将动画片段缩小一些，并将动画放下。 – FabienO 2010-09-18 11:43:36

你或许应该使用AJAX对于这种类型的事情，但如果你真的想：

document.getElementById('submit').addEventListener('click', function(e) { 
    e.preventDefault(); 
    setTimeout(function() { 
     document.getElementById('login_form').submit(); 
    }, 3500); 
}, false);

来源

2010-09-18 10:51:39

我认为这是更好地使用.submit（FNC）然后。点击 - 据我所知应该也工作在输入
使用event.preventDefault（），然后自己提交当动画完成

来源

2010-09-18 10:53:15 NoxArt

上提交延迟页变化 - jQuery的

回答

相关问题