javascript - 如何为更改 HTML 内容添加动画/效果？

Question

我正在努力在邮件发送后淡入#myform 的 HTML 的新内容，但我不知道如何给它一个动画，所以它不只是抛出新的 HTML。我正在考虑使用“淡入”进行此类操作，但它不起作用，正确的做法是什么？

$(document).ready(function() {

	$(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){
	    e.preventDefault();
	    if ($(this).valid()) {
	      var data = $(this).serialize();
	      $(this).html(newHTML).fadeIn("fast");
	      $.post( "includes/sendmail.php", {data});
	    }
	  }); 
	});
	
});

Answer 1

$(document).ready(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').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>  

在form submit 你可以先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});
    }
}); 

你可以从上面的代码中得到一个想法，但是你可以使用 fadeIn/fadeOut 进行 N 种组合。所以请根据您的需要对其进行微调。