Как добавить анимацию/эффект для изменения содержимого HTML?

Question

Я работаю над выцветанием в новом содержимом HTML-кода # myform после отправки почты, но я не могу понять, как дать ему анимацию, поэтому он не просто выкидывает новый HTML-код. Я думаю о чем-то подобном с «fadeIn», но он не работает, каков его правильный способ?

$(document).ready(function() { 
 

 
\t $(function() { 
 
\t var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 
 
     
 
\t $('#myform').validate(); 
 
\t $('#myform').on("submit",function(e){ 
 
\t  e.preventDefault(); 
 
\t  if ($(this).valid()) { 
 
\t  var data = $(this).serialize(); 
 
\t  $(this).html(newHTML).fadeIn("fast"); 
 
\t  $.post("includes/sendmail.php", {data}); 
 
\t  } 
 
\t }); 
 
\t }); 
 
\t 
 
});

Answer 1

Вы должны сначала скрыть содержимое узла вы просто заменили на FadeIn, чтобы работать должным образом:

$(function() { 
 
    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 
 

 
    $('#myform').validate(); 
 
    $("#myform").on("submit", function(e) { 
 
    if ($(this).valid()) { 
 
     console.log("it's valid"); 
 
     var data = $(this).serialize(); 
 
     $(this).html(newHTML).hide().fadeIn(); 
 
     $.post("includes/sendmail.php", { 
 
     data 
 
     }); 
 
    } 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
 

 
<form method="POST" id="myform"> 
 
    <input type="text" name="username" id="username" /> 
 
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" /> 
 
</form>

Answer 2

$(document).ready(function() { 
 

 
\t var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 
 
     
 
    
 
    $('#myform').on("submit",function(e){ 
 
    e.preventDefault(); 
 

 
     $(this).fadeOut(3000, function(){ 
 
      $('#myform').html(newHTML); 
 
      $('#myform').fadeIn(3000); 
 
     }); 
 

 
}); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<form id="myform"> 
 
    <input id="text" /> 
 
    <input type="submit" value="Submit" /> 
 
</form>

На formsubmit вы можете первым fadeOut оригинальное содержание, а затем вы можете заменить его содержимое новее html как следующим образом:

$('#myform').on("submit",function(e){ 
    e.preventDefault(); 
    if ($(this).valid()) { 
     var data = $(this).serialize(); 

     $(this).fadeOut(3000, function(){ 
      $('#myform').html(newHTML); 
      $('#myform').fadeIn(3000); 
     }); 

     $.post("includes/sendmail.php", {data}); 
    } 
}); 

Вы можете взять идею из кода выше, но есть N комбинаций, которые вы можете сделать с помощью fadeIn/fadeOut. Поэтому, пожалуйста, настройте его так, как вам нужно.