php - 动画完成后执行表单JQuery

Question

我仅在动画完成并完成后才尝试提交表单

代码 ------> http://pastie.org/5109573

<form action='loginn.php' method='post'>
    <fieldset>
        <legend>Register</legend>
        <label for='username'>Username*:</label>
        <input type='text' name='username' id='username' maxlength="50"
        />
        <label for='password'>Password*:</label>
        <input type='password' name='password' id='password'
        maxlength="50" /> <a><input class ="animated" type='submit' name='Submit' value='Submit' /></a>

    </fieldset>
</form> 
<span></span>

<script src="jquery.js"></script>
<script>
    $("form").submit(function () {
        event.preventDefault();
        if ($("input:first").val() == "correct") {
            $("span").text("OKAY :D").show().fadeOut(1000);
            $("a").addClass('animated hinge');

            $("span").promise().done(function () {
                return true;
            });

        } else {
            $("span").text("Not valid!").show().fadeOut(1000);
            return false;
        }   
    });
</script>
</body>

</html>

表单在动画完成之前提交！

Answer 1

您需要使用动画回调函数在动画完成时提交表单，如下所示：

$("input[name='Submit']").on('click', function(e) {
    e.preventDefault();
    var form = $(this);
    if ($("input:first").val() == "correct") {
        $("span").text("OKAY :D").show().fadeOut(1000, function() {
            form.submit();
        });
        $("a").addClass('animated hinge');
    } else {
        $("span").text("Not valid!").show().fadeOut(1000);
    }
});​

Answer 2

问题很可能在这里：

$("form").submit(function() {
    event.preventDefault();

你没有声明event. 尝试这个：

$("form").submit(function(event) {

编辑：

此外，您传递给该done()方法的函数不执行任何操作。从该函数返回true不会影响事件；事实上，在该函数运行时，事件已经被处理并消失了。

如果您尝试使用done回调提交表单，则需要明确执行。为避免再次提交时出现无限循环，请尝试指定命名空间：

$("form").submit(function(event) {
    var that = this;
    if (event.namespace != 'verified') {
         event.preventDefault();
         if ($("input:first").val() == "correct") {
              $("span").promise().done(function () {
                   $(that).trigger('submit.verified');
              });
         }  else {  
             $("span").text("Not valid!").show().fadeOut(1000);                             
             return false;
         }
    } 
});​