jquery animations when appending html

Question

I am trying to create the fadeIn effect when prepending a <UL> using Jquery, but the animation effect never appears on the page. Am i doing a mistake in specifying the fadeIn effect?

This is how my code looks

<UL id="myUL">
   <LI> First Item <LI>
   <LI> Second Item <LI>
   <LI> Third Item <LI>
   <LI> Fourth Item <LI>
<UL>

The Jquery is as follows (on button click)

var liData = "<LI> A New Item </LI>";
$('#myUL').prepend(liData).fadeIn('slow');

Though the <LI> appears correctly on the page, i donot see the fadeIn effect on the page. Am i doing something wrong in binding the data and the effect on the item?

Answer 1

Added the display:none style, so Its not visible as soon as you prepend it and somewhat inverted the jQuery line.

var liData = '<LI style="display:none"> A New Item </LI>';
$(liData).prependTo('#myUL').fadeIn('slow');

JSFiddle : http://jsfiddle.net/sPeHy/4/

Answer 2

Demo

This should do it

$('#myUL').prepend(liData).find("li:first").hide().fadeIn('slow');

Basically you were selecting the ul and not the li. Also you need to hide it before you fade it in or it will just fade from 100% to 100%, and you will see nothing in effect.