我正在努力在邮件发送后淡入#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});
}
});
});
});
最佳答案
$(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 种组合。所以请根据您的需要对其进行微调。
关于javascript - 如何为更改 HTML 内容添加动画/效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37345572/