jQuery 在发布表单操作之前淡出页面

Question

我必须在发布表单操作之前淡出页面。我不确定这是否可能，所以我不知道从哪里开始。

就是说，我确实知道如何为链接做这件事……下面的javascript。感谢您的帮助!

HTML 表单我需要拦截来自的post方法

<form id="postitron" method="post" action="/postitron/answertron.php">

我将 JavaScript 用于 anchor 标签

var $linkLocation;

function redirectPage(){
    window.location = $linkLocation;
}

$('a.transition').click(function(event){
    event.preventDefault();
    $linkLocation = this.href;
    $('#page').animate({opacity:0},400, function(){
        redirectPage();
    });
});

---

更新:

这么多答案!谢谢!

我已经实现了全面推荐的要点，并且得到了一个无限循环的动画......我错过了什么？

我制作了一个 JSFiddle 来演示...它不会在无限循环中设置动画...但它也不会返回 404。奇怪!？

HTML

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>

JavaScript

$('#postitron').submit(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

---

更新 #2

@Ahren 建议 @Priyank Patel 使用 .one() 方法会阻止动画无限循环，它确实如此(耶!)，但我的控制台现在返回阻止表单提交的错误:

未捕获的类型错误:对象的属性“提交”不是函数

这是更新后的 JavaSript

$('#postitron').one('submit', function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

---

更新 #3

进一步思考... .one() 方法为元素执行一次处理程序.. 是否阻止在动画消失后执行相同的 submit() 方法？

---

更新 #4

jQuery animate in infinite loop

Answer 1

您可以使用基本相同的代码，但改为绑定(bind)到表单提交。我相信 jQuery 足够聪明，不会无限循环这个。

$(<submitbutton>).click(function(event){
    event.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('form').submit();
    });
});

更新 - 根据 technopeasant 的反馈，您可以通过绑定(bind)到按钮的单击事件而不是提交事件来避免无限循环。