jquery animations when appending html

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开发者_JAVA技巧 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?

---

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/

---

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.

---

First, the item should be added by an event so you can notice it, not at the load time.

Second, the newly added list item should be by default hidden so it can be displayed with a fade-in effect.

Here is the code:

$('#add_item').click(function(e){
    e.preventDefault();
    var liData = '<LI style="display:none"> A New Item </LI>';
    $(liData)
        .prependTo('#myUL')
        .fadeIn('slow'); 
});

Here is a demo

---

try this

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

fiddle: http://jsfiddle.net/sPeHy/3/