javascript - 提交折叠div并从div更改图像后的Ajax表单

Question

所以，我有一个带有背景图像（信封）的表格。提交后，我想留在同一页面上并折叠包含表单的部分 div 并仅显示一张带有谢谢 bla bla 的图像。如何做到这种平滑的折叠和替换？如果有人有一些想法或链接，我将不胜感激。

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#form1").submit(function(){
            $("#formplic").html("<img src='images/thanks.png'/>");
        });
    }); 
</script> 

<div id="formplic"><img src="images/form.png"/></div>

<form id="form1" action="send.php" onSubmit="return chkForm(this)" name="form1" method="post" >
    <textarea name="message" cols="4" rows="4"  id="message" value=""></textarea>
    <input type="text"  id="name" name="name" value="" />
    <input type="text"  id="email" name="email" value="" />    
    <input type="submit" value="" id="submit" />
</form>

Answer 1

一些褪色的东西怎么样？

$(document).ready(function() { 
    $("#form1").submit(function(){
        $("#formplic").fadeOut(1000, function() {
             $(this).html("<img src='images/thanks.png'/>").fadeIn(1000);
        });
    });
}); 

或滑动的东西？

$(document).ready(function() { 
    $("#form1").submit(function(){
        $("#formplic").slideUp(1000, function() {
             $(this).html("<img src='images/thanks.png'/>").slideDown(1000);
        });
    });
}); 

稍微搜索一下，这种事情应该很简单！