Question

我无法将附加到<li>的{{1}}元素淡入。

我尝试过的事情。

在淡入之前设置$('ul#posts') display:none。请求后无法查看附加的html。这意味着fadeIn（）无效。
<li>似乎也无效。

代码：

$(wall_post).appendTo('ul#posts').fadeIn("slow");

wall_post HTML结构

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');
    }
});

Answer 1

你现在正在使用一个字符串来处理，不能一直工作..所以我应该做的是使它成为这样的对象：

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

Answer 2

你必须在应用fadeIn操作之前隐藏或显示：wall_post都没有。使用此操作

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

这里是jsfiddle链接http://jsfiddle.net/gagan/M22EQ/

<强>更新

这比之前的jsfiddle link

更合适

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

请参阅评论以了解早期解决方案的问题。

Answer 3

@gansdeep答案很完美，即

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

Answer 4

尝试：

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

使用fadeIn（）附加html淡入淡出

4 个答案: