Question

To insert a li after #first_li with a certain speed, I do :

$("#first_li").after("<li>Hello</li>").fadeIn(500); 

The insertion works but not the speed, what’s is the problem ?

Answer 1

Try setting the li element to be invisible before adding it to the DOM:

$("#first_li").after("<li style='display: none;'>Hello</li>").next().fadeIn(500);

Here is a demo: http://jsfiddle.net/hDzAS/

This selects the #first_li element, inserts the hidden li element after it, then selects the newly added li element and fades it in.

You can also add the li element to the DOM like this (if you don’t like to concoct strings of HTML):

$("#first_li").after($("<li />").text('Hello').css('display', 'none')).next().fadeIn(500);

Here is a demo: http://jsfiddle.net/hDzAS/2/

Docs for .next(): http://api.jquery.com/next

Update

I personally like the slideDown() effect: http://jsfiddle.net/hDzAS/1/