jquery - 延迟 html 表单提交，直到 div 动画完成

Question

我正在使用 jquery 表单验证插件来验证我的表单。我已经设置了所有规则、消息等。所以在我的 html 中，我制作了一个 css 样式的对话框，它只是作为确认消息显示给用户。当用户注册此 div 确认 时，它就会消失在调用表单的操作文件之前遍历整个页面。我的问题是如何延迟表单提交操作触发足够长的时间以使我的确认淡入淡出。当我尝试它时，要么立即触发提交，要么根本不做任何事情。

//validation plugin
$("#register_form").validate({
    errorClass: "invalid",
    invalidHandler: function (event, validator) {
        $('html, body').animate({
            scrollTop: '0px'
        }, 300);
    },
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },

    messages: {
        firstname: {
            required: "Enter your first name"
        },
        lastname: {
            required: "Enter your last name"
        },
        email: {
            required: "Enter your email",
            email: "Enter a valid email"
        }

    },

    errorContainer: $(".errorCont"),
    errorLabelContainer: $('.errorCont ul'),
    wrapper: 'li',

}); //Etc above all working its the code below

$("#register_form").submit(function (e) {
    e.preventDefault();
    if ($("#register_form").valid()) {
        showpopup();
        // Show popup and then proceed with submission action ??
        // calling submit here just submits straight away without waiting for pop to hide 
    }

});

function showpopup() {
    $('#dialog').fadeIn("slow");
    $("#bodywrap").css({
        "opacity": "0.3"
    });
    setTimeout(hidepopup, 3000);
}

function hidepopup() {
    $('#dialog').hide();
    $("#bodywrap").css({
        "opacity": "1");

    }
}

Answer 1

不使用setTimeout，而是使用.fadeOut() 的完整处理程序功能。

$('#dialog').fadeOut("slow", function() {
    // This function will fire after the animation's ending
    // Submit the form from here.
});