如何爲改變HTML內容添加動畫/效果？

Question

郵件發送後，我正在淡化＃myform的HTML新內容，但我無法弄清楚，如何給它一個動畫，所以它不會拋出新的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

您必須先隱藏您剛剛更換了淡入正常工作的節點的內容：

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

你可以從上面的代碼中獲得一個想法，但是你可以用fadeIn/fadeOut來完成N個組合。所以請根據您的需要進行微調。