jQuery and multiple li AppendTo

Question

I'm having some trouble fading in some li elements after being appended to a list.

var html contains the list items.

$(html).hide().appendTo('#thelist').fadeIn();

The fade in works when there's a single li element loaded in however if there's multiple li's jQuery doesnt insert anything let alone fade it in.

Could anyone suggest a fix?

EDIT 1:

Example - thelist is my ul and it's not hidden.

<ul id="thelist">
   <li>entry1</li>
   <li>entry2</li>
   <li>entry3</li>
</ul>

EDIT 2: The list exists as above in HTML and then the jQuery adds additional li's which I wish to be faded in.

EDIT 3: html contains a jQuery ajax call containing the html to display around 5 li's with article content. It adds correctly to the ul when I don't use a fade in or animate. When I add a fade in it adds the elements to the ul however it doesn't fade them in.

EDIT 4: Here's the load function:

 $(function() {
     $('.more').live('click',function() {
     var element = $(this);
     var msg = element.attr('id');
     $('#morebutton').html('<p><em>Loading Articles.</em></p>');
     $.ajax({
         type: 'POST',
         url: 'more.asp',
         data: 'lastmsg=' + msg,
         cache: false,
         success: function(html){
             $('#morebutton').remove();
             $(html).hide().appendTo('#thelist').fadeIn();
         }
     });
     });
 });

SOLUTION:

I got it to fade in by changing:

 $(html).hide().appendTo('#thelist').fadeIn();

to

 var item = $(html).fadeIn();
 $('#thelist').append(item);

Seems like it's something to do with the way jQuery chains in a particular order.

Answer 1

try using after

$(html).hide().after('#thelist').fadeIn();

Answer 2

This works fine for me. Ensure your list items and list exist. Check for typos of any ids.

http://jsfiddle.net/gftdz/1/

Answer 3

Not sure but may be you want something like this

$('#thelist').fadeOut('fast',function(){$('#thelist').append(html).fadeIn()});