javascript - jQuery 动画可以工作，但并不总是有效

Question

我有一个表单，其中包含带有 type="image" 属性的 input。每次无论我接到成功还是失败的电话，我都会更改图像。

但它并不总是有效，我不明白为什么。有没有可能的方法来消除 setTimeout(function()) 或实现此动画的替代方法，因为这可能会导致问题？

HTML

<p class="text-center" style="color:brown" id="input_result">Send</p>
<form data-ajax="false" method="post" name="login_form" role="form">
    <div class="form-group">
        <input type="image" src="images/default.png" class="img-responsive center-block" name="submit" class="submitBtn" id="input_img">
    </div>
</form>

脚本

<script>
    $('form').bind('submit', function() {


        $.ajax({
            type: 'POST',
            url: 'includes/sendmail.php',
            data: $(this).serialize(),
            cache: false,
            dataType: 'text',
            success: function(data, status, xhttp) {

                $("#input_img").slideUp(2000).slideDown(1000);
                setTimeout(function() {
                    // Success animation
                    $('#input_img').attr("src", "images/success.png");
                    jQuery("input[type='image']").prop("disabled", true);
                    $('selector').click(false);
                    $("#input_result").text("Sent!");
                    $("#input_result").css("color", "green");
                }, 1999);
                this.submit();
            },
            error: function(jqXHR, textStatus, errorThrown) {

                $("#input_img").slideUp(2000).slideDown(1000);
                setTimeout(function() {
                    // Fail animation
                    $('#input_img').attr("src", "images/fail.png");
                    jQuery("input[type='image']").prop("disabled", true);
                    $('selector').click(false);
                    $("#input_result").text("Failed to send!");
                    $("#input_result").css("color", "red");
                }, 1999);
            },
        });
        return false;
    })
</script>

Answer 1

当您使用 this.submit(); 提交表单时，页面将提交到服务器并再次重新加载，因此您会丢失成功动画。由于您在函数中发布值，因此无需提交表单。