Javascript 使用fadeIn（）将html附加到淡入

我无法使附加到

$（'ul#posts'）

的

元素淡入

我试过的东西

在淡入前设置

的

显示：无。请求后无法查看附加的html。这意味着fadeIn（）不起作用

$（墙柱）.appendTo（'ul#posts'）.fadeIn（“慢”）似乎也不起作用

代码：

var wall_post = '<li> <img src="image/avatar.jpg" class="avatar"><div class="status"><h2><a href="#" target="_blank">disran</a></h2><p class="message">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name"><a href="' + siteurl + '" target="_blank">' + sitetitle + '</a></p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div></div> </div><p class="likes">5 hours ago · 100 Likes </p></li>';

var message_wall = $('#message_wall').attr('value');

$.ajax({
    type: "GET",
    url: "insert.php",
    data: "message_wall=" + wall_post,
    success: function () {
        //$('ul#posts').append(wall_post).fadeIn('slow');
        //$(wall_post).appendTo('ul#posts').fadeIn("slow");
        $('ul#posts').append(wall_post).fadeIn('slow');
    }
});

var wall\u post=
+textarea\u content+”
+image\u html+
+siteurl+”
+sitedesc+”
5小时前·100次喜欢；
var message_wall=$（'#message_wall'）.attr（'value'）；
$.ajax({
键入：“获取”，
url:“insert.php”，
数据：“message_wall=“+wall_post，
成功：函数（）{
//$（'ul#posts'）.append（wall#u post.fadeIn（'slow'）；
//$（wall#u post）.appendTo（'ul#posts'）.fadeIn（“slow”）；
$（'ul#posts'）.append（wall#u post.fadeIn（'slow'）；
}
});

wall\u post HTML结构

<li>
    <img src="image/avatar.jpg" class="avatar">
    <div class="status">
        <h2><a href="#" target="_blank">disran</a></h2>
        <p class="message">[.. textarea_content ..]</p> 
        [.. image_html ..]
        <div class="data">
            <p class="name">
                <a href="[.. siteurl ..]" target="_blank">[.. sitetitle ..]</a>
            </p>
            <p class="caption">[.. siteurl ..]</p>
            <p class="description">[.. sitedesc ..]</p>
        </div>
    </div>
    <p class="likes">5 hours ago 100 Likes</p>
</li>

[…textarea\u content.]
[…图像_html.]


[…站点URL..]
[…sitedesc..]
5小时前100次喜欢

已经可见的元素不会淡入。你得先把它藏起来

wall_post.hide();
$('ul#posts').append(wall_post).fadeIn('slow');

尝试：

---

在应用fadeIn操作之前，必须先隐藏或显示：无wall_post。使用此操作

$('ul#posts').append(wall_post).hide('fast').fadeIn('slow');

这里是jsfiddle链接

更新：

var wall_post = '<li> <img src="image/avatar.jpg" class="avatar"><div class="status"><h2><a href="#" target="_blank">disran</a></h2><p class="message">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name"><a href="' + siteurl + '" target="_blank">' + sitetitle + '</a></p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div></div> </div><p class="likes">5 hours ago · 100 Likes </p></li>';

var message_wall = $('#message_wall').attr('value');

$.ajax({
    type: "GET",
    url: "insert.php",
    data: "message_wall=" + wall_post,
    success: function () {
        //$('ul#posts').append(wall_post).fadeIn('slow');
        //$(wall_post).appendTo('ul#posts').fadeIn("slow");
        $('ul#posts').append(wall_post).fadeIn('slow');
    }
});

这比之前的jsfiddle更合适

---

请参阅注释以了解早期解决方案的问题

您现在正在使用字符串来处理，但不总是有效。。所以我应该做的是把它变成这样的对象：

var wall_post = $('<li>[.. rest of html structure ..]</li>');
var message_wall = $('#message_wall').attr('value');

$.ajax({
    type: "GET",
    url: "insert.php",
    // why are you sending the wallpost?? why getting you HTML from PHP?? 
    // but i think its the message_wall variable you ment?
    data: "message_wall=" + wall_post,
    success: function () {
        $('ul#posts').append(wall_post)
        wall_post.hide(); // instant hide the wall_post
        wall_post.fadeIn('slow'); // let is fadein slow
    }
});

var wall_post=$（“
[…html结构的其余部分]
”）；
var message_wall=$（'#message_wall'）.attr（'value'）；
$.ajax({
键入：“获取”，
url:“insert.php”，
//你为什么要发送wallpost？为什么要从PHP获取HTML？？
//但我认为这是你的信息？
数据：“message_wall=“+wall_post，
成功：函数（）{
$（'ul#posts'）。附加（wall#u post）
wall_post.hide（）；//立即隐藏wall_post
wall_post.fadeIn（'slow'）；//让fadeIn慢一点
}
});

@gansdeep的答案是完美的，即

   $('ul#posts').append($(wall_post).hide().fadeIn('slow'));

---

请带上一个来自教程的样本@YYTG看起来像是在用java脚本编写HTML结构，考虑使用Stask.js模板引擎，非常有帮助。问题是我想淡入只附加的

元素。由于ul#posts包含所有的posts，在这种情况下，当添加新post时，所有的posts都将淡入。问题是我只想淡入所附加的

元素。由于ul#posts包含所有的posts，在这种情况下，当添加新post时，所有的posts都将淡入。@asdgfasagas请仔细查看我的代码。我只对新代码执行fadeIn，而不是对所有帖子。谢谢，我应该使用一个对象。消息将发送到insert。php将把它存储在数据库中。就像我在上面的评论行中所说的

data

I quest您使用变量

message\u wall

   $('ul#posts').append($(wall_post).hide().fadeIn('slow'));