jQuery - Cycle alternate <li>'s? -

on site developing i'm trying cycle through load of <li>'s, @ alternating times. example:

1. to start off i'd showing first 2 <li> items.
2. item 1 fade out.
3. item 3 fade in, in place of item 1.
4. item 2 fade out.
5. item 4 fade in, in place of item 2.

html:

<ul>   <li>item 1</li>   <li>item 2</li>   <li>item 3</li>   <li>item 4</li> </ul> 

any idea how can achieve effect? thanks!

you (could simplified further):

$("#items li").slice(2).hide(); var index = false; setinterval(function() {     $("#items li").eq(index).fadeout(function() {        $("#items li").eq(2).insertafter(this).fadein();        $(this).appendto("#items");        index = !index;     });   }, 3000); 

this gives <ul> , id make faster work work: <ul id="items">, you can test out here. before ask, yes i'm blatantly abusing weak typing treat index both boolean , 1/0 .eq() function.

what is:

• hide past first 2
• start false (0) index, we're changing item 1 first
• every 3 seconds (adjust want):
  • fade out current item, either first or second, alternating
  • take next in line (currently 3rd item, 0-based index or 2 .eq()) , insert after 1 was, fade in
  • take 1 faded out stick @ end of line
  • change index change other 1 next time
  • repeat in 3 seconds