Javascript 如何将淡入淡出添加到附加？

我还不能适应我在stackoverflow中找到的描述如何向追加添加淡入淡出的示例，我也不知道为什么

我有以下使用ajax将联系人表单替换为成功消息的代码：

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('#message-form').append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>');
           });
         }
       });
       return false;

$.ajax({
类型：“POST”，
url:“联系engine.php”，
数据：dataString，
成功：函数（）{
$（“#联系方式”）.html（“”）；
$（“#消息表单”）.html（“您的消息已成功提交！”）
.hide（）
.fadeIn（2000年，职能（）{
$（“#消息表单”）.append（“
感谢您的联系。我会尽快回复您。
”；
});
}
});
返回false；

我正在尝试将附加设置设置为淡入。我尝试在附加html之后添加.hide（）.fadeIn（2000），但没有成功。有人能帮我解决这个问题吗

谢谢

---

Nick

如果在

append

之后添加

hide

和

fadeIn

，问题是您将隐藏和淡入容器，而不是正在添加的元素。如果您将其更改为

appendTo

，它应该可以工作：

$(NEW_ELEMENT).appendTo(SOMETHING).hide().fadeIn(2000)

---

例如：

我更喜欢在追加之前隐藏…
大概是这样的：

$（新元素）.hide（）.appendTo（某物）.fadeIn（）

$（文档）.ready（函数（）{
$（“记录已成功修改”）。附录（#body”）。fadeIn（2000）。fadeOut（4000）；
//$（“#body”）.html（“”）；
});
h3{
文本对齐：居中；
宽度：30%；
填充：15px0；
顶部：100px；
位置：绝对位置；
颜色：雪；
左：35%；
背景：黑暗；
/*
暗绿色，雪
黑暗，雪
*/
}

我没有确切的解决方案，但您正在追加回调。这意味着它直到消失后才附加。尝试像hide（）.append（'Yourtag'）.fadeIn（2000）；--编辑：在不测试代码的情况下，我会做一些类似于hide/fadein/append的事情。设置动画（{opacity:0}，0）。添加（“Some p content

”）。设置动画（{opacity:1}，2000）；--这是一种安全的方法，我相信不用我测试代码也能正常工作。谢谢James，这就解决了问题。

<script type="text/javascript">
$(document).ready(function(){
    $("<h3>Records has been successfully modified.</h3>").appendTo("#body").fadeIn(2000).fadeOut(4000);
    //$("#body").html("<div id='message-form'></div>");

});
</script>

<style type="text/css">
h3{
    text-align:center;
    width:30%;
    padding:15px 0;
    top:100px;
    position:absolute;
    color:snow;
    left:35%;
    background:darkred;

    /*
     darkgreen, snow
    darkred, snow

     */
}
</style>