Question

我的表单包含input type="image"属性。无论我是成功还是失败，我每次都会更改图像。

但它总是不起作用，我不明白为什么。有没有办法消除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();提交表单时，页面将提交给服务器并重新加载，因此您将失去成功动画。由于您要在函数中发布值，因此您无需提交表单。

Answer 2

您可以使用slideUp的回调来运行您的函数，而不是$("#input_img").slideUp(2000).slideDown(1000);，而是在该函数的最后调用.slideDown() 喜欢： $("#input_img").slideUp(2000, function(){ $('#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"); $("#input_img").slideDown(1000); }

jQuery动画有效，但并非总是如此

2 个答案: