My form is equipped with AJAX functionality. I aim for it to smoothly 'fade in' when the submission is either successful or unsuccessful. In case of success, the script appends the 'has-success' class to the div and alters the content. I want to achieve a 'fade in' effect when there is a change in content and class. I attempted to use 'fadeIn(500)' after the 'append' function, but it didn't yield the desired outcome. You can view a live demonstration here.
<div class="container">
<form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8">
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="Correo" placeholder="Correo electrónico"><!-- use this to reply visitors and prevent spam via akismet -->
</div>
<div class="form-group"><input type="text" class="form-control" id="nombre" name="Nombre" placeholder="Nombre"></div>
<div class="form-group"><textarea rows="4" class="form-control" id="textarea" name="Mensaje" placeholder="Cuéntanos"></textarea></div>
<input type="hidden" name="_gotcha"><!-- use this to prevent spam -->
<div class="form-group"><input type="submit" class="btn-contacto float-right"><div class="spinner-border" role="status">
<span class="sr-only">Cargando...</span>
</div></div></div></form></div>
JQuery:
$(function(){
$(".ajaxForm").submit(function(e){
$('.spinner-border').css("display", "block");
e.preventDefault();
var href = $(this).attr("action");
$.ajax({
type: "POST",
dataType: "json",
url: href,
data: $(this).serialize(),
success: function(response){
if(response.status == "success"){
$(".ajaxForm").html(response).addClass("has-success");
$(".ajaxForm").append( "<p>¡Gracias! Contactaremos contigo lo antes posible.</p>" ).fadeIn(500);
}else{
alert("An error occurred.");
}
}
});
});
});