Sé que esa pregunta se ha hecho miles de veces, pero no encontré una solución para mí.

Tengo una función, que se llama cuando se envía un formulario. Comprueba algunos campos de formulario y envía los datos con ajax a un script php. El problema es que puede necesitar algunos segundos hasta que php termine y quería desvanecerme en una animación css, que el usuario sepa que deberá esperar.

Si hay un error en un campo de formulario, la animación aparece y desaparece correctamente. Pero si la verificación de campos está bien, la mayoría de las veces jQuery continúa y llama a ajax sin terminar la animación. A veces, la animación se desvanece, a veces se detiene después de unos pocos milisegundos y, a veces, no sucede nada hasta que regresa la respuesta del script php.

¿Cómo puedo decirle a jquery que espere con la ejecución de la parte ajax hasta que finalice la animación?

 $(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; }); });