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/