I cant get my <li> element that is appended to $('ul#posts') to fade in.

Things which I have tried.

1. Setting the display:none of <li> before fading it in. The html that is appended is not viewable after the request. That means that fadeIn() didnt work.

2. $(wall_post).appendTo('ul#posts').fadeIn("slow"); also doesnt seem to work.

Code:

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

wall_post HTML structure

<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>

I cant get my <li> element that is appended to $('ul#posts') to fade in.

Things which I have tried.

1. Setting the display:none of <li> before fading it in. The html that is appended is not viewable after the request. That means that fadeIn() didnt work.

2. $(wall_post).appendTo('ul#posts').fadeIn("slow"); also doesnt seem to work.

Code:

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

wall_post HTML structure

<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>

• javascript
• jquery

• Please bring a sample at jsfiddle – Yacov Commented Nov 29, 2011 at 7:17
• This is straight from a tutorial. youhack.me/2011/07/07/… – SupaOden Commented Nov 29, 2011 at 7:24
• @yytg jsfiddle/M22EQ/1 – SupaOden Commented Nov 29, 2011 at 7:36
• Looks like you are Writing a html Structure from java script , Consider using Underscore.js template Engine , Its very helpful. documentcloud.github./underscore/#template – Gautam Commented Nov 29, 2011 at 13:45

5 Answers 5

You are now using a string to handle, doenst work always.. so what i should do is make it a object like this:

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

you have to make hide or display:none of wall_post before applying fadeIn operation. Use this operation

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

here is jsfiddle link http://jsfiddle/gagan/M22EQ/

Update:

This is the more appropriate than earlier, jsfiddle link

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

see ment to know the problem with earlier solution.

@gansdeep answer is perfect i.e.

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

An already visible element won't fade in. You'll have to hide it first

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

Try:

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