fadeIn li one by one

fadeIn li one by one

I have a list of some item, i want fadeIn element one by one, means if
first element complete fadeIn then next element fadeIn and so on, in my
given code what going wrong i dont know, please help me..
HTML
<ul id="ulfade"><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li></ul>
JS
var i=0
$('#ulfade li:nth-child(' + i + ')').fadeIn(
500, function () {
$('#ulfade li:nth-child(' + (++i) + ')').fadeIn('slow');
});
jsFiddle: http://jsfiddle.net/subhash9/suUHD/2/