Jquery fadein/fadeout list

I have a list:

<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

I need to fadein/fadeout all this <li> items. I need a loop, so when the last one ap开发者_JAVA百科pears and disappears, the first appears next.

here is a super basic example :

$("#list li").hide();
var counter = $("#list li").length;

var i = setInterval(function() {
    $("#list li").eq(counter - 1).show();
    $("#list li:visible").fadeOut(2000);
    counter--;
    if (counter === 0) {
        counter = 5;
    }
}, 2000);

Click Here

An Alternate Alternative to what Alexander and Michael are using

An alternative to the method Alexander is using.

function hideItem(i) {
   var items = $('.list li');
   if (i >= items.length) { return; }
   items.eq(i).fadeOut(1000, function() { showItem(i+1); }); 
}

function showItem(i) {
    var items = $('.list li');
    if (i >= items.length) { return; }
    items.eq(i).fadeIn(1000, function() { hideItem(i); });
};

showItem(0);