提交 – jQuery延迟页面更改

头

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

内容

  
 
 Username:
 
  
  

正如您所看到的，我在点击提交时已经完成了，user_box动画回到0pxs（向右滑动）。 问题是我需要将页面加载延迟大约1秒才能完成动画时间。 但只有在单击“提交”按钮时。 如何延迟页面以允许动画完成？

我试过了..

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

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

ps一般的想法是user_box向右滑动每个查询并向左返回结果。 它主要是PHP，因此页面加载它从右向左滑动。 我会稍后讨好一些东西，以便在登录时阻止它发生。

Answer 1

最可靠和灵活的方法是在$().animate调用上使用complete回调选项：

 $('#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/

Answer 2

你可能应该使用AJAX来做这类事情，但如果你真的想：

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

Answer 3

1. 我认为最好使用.submit（fnc）然后.click – 如果afaik也可以在Enter上工作
2. 使用event.preventDefault（），然后在动画结束时自己提交