如何等待 jQuery 动画？

Question

我知道这样的问题已经被问过一千次了，但我没有找到适合我的解决方案。

我有一个函数，在提交表单时调用。它检查一些表单字段并使用 ajax 将数据发送到 php 脚本。问题是，它可能需要几秒钟直到 php 完成并且我想淡入 css 动画，用户知道他应该等待。

如果表单域中有错误，动画会正确淡入淡出。但是如果字段检查没问题，大多数情况下 jQuery 会继续并调用 ajax 而不完成动画。有时动画会淡入，有时它会在几毫秒后停止，有时直到 php 脚本的答案回来之前什么都没有发生。

我如何告诉 jquery 等待 ajax 部分的执行，直到动画完成？

$(document).ready(function () {
    $('.daten_form').submit(function () {
        $("#loader-wrapper").fadeIn('normal');
        hasError = false;
        if ($('#delkfz').prop('checked',false)){
            if ($('#fin').val() == '') {
                $('#fin').addClass('error_class');
                hasError = true;
            }
        }
        if (hasError) {
            $("#loader-wrapper").fadeOut("normal");
            $('.error_box').show();
        } else {
            var einzelfz = false;
            var weiter = false;
            if ($('#einzelfz').val() == '1')
                einzelfz = true;
            if ($("#weiter").prop('checked') == true)
                weiter = true;
            var kvid = $('#kvid').val();
            $.ajax({
                type: 'POST',
                url: 'kvc_write.php',
                cache: false,
                data: $(".daten_form").serialize(),
                success: function (data) {
                    if (data == "error") {
                        $("#loader-wrapper").fadeOut("normal");
                        $('.success_box').hide();
                        $('.error_box').show();
                    } else if (data == "logout") {
                        var url = "index.php?ablauf=1";
                        $(location).attr('href',url);
                    } else if (data == "success" && (einzelfz || !weiter)) {
                        var url = "prepkvpdf.php?kvid="+kvid;
                        $(location).attr('href',url);
                    } else {
                        $("#loader-wrapper").fadeOut("normal");
                        $('.error_box').hide();
                        $('.success_box').show();
                    }
                }
            });
        }
        return false;
    });
});

Answer 1

使用 Ajax 的最佳方式：

        $.ajax({
            data: data,
            type: "GET", //or POST
            url: "YOU-KNOW.php",
            beforeSend: function(){
                //script runs when ajax send data
            },      
            success: function(data){
                //script runs when php finish the thing and tell me data.
            }
        });