jquery - 无限循环中的jQuery动画

Question

我正在努力做到这一点：

1. 阻止提交按钮提交表单

2. 淡出一个元素

3. 然后提交表格

但是我陷入了无限循环的动画！为什么？？

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();
    });
});

PS-我也尝试过该.one()方法而不是.submit()，但是一旦动画完成，它会阻止提交方法在#postitron 上执行:(

Answer 1

submit()调用您的自定义绑定submit函数，该函数submit又调用您的函数等。

尝试使用 DOM 的提交：

$('#postitron')[0].submit()

Answer 2

这是因为您将事件绑定在 上SUBMIT，并且您.animate callback function正在SUBMIT表单中...导致无限循环。

试试这个 ：

而不是在按钮.submit上绑定事件，而是在按钮上form绑定事件。.clicksubmit

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

请记住，我没有对此进行测试。

Answer 3

您可以预先定义函数，并在其中解绑提交，然后重新提交。这是一个黑客，但它可能会奏效。

或者，也许您检查它的隐藏性，然后像这样重新提交：

var hidden = false;
$('#postitron').submit(function(e){
    if ( !hidden ) {
        e.preventDefault();
        $('#page').animate({opacity:0},400, function(){
            hidden = true;
            $('#postitron').submit();
        });
    }
});