List of slides using jQuery

Question

My javascript is not up to scratch and I am at a dead end with this!

I need to create an animated list with javascript like this - http://www.fiveminuteargument.com/blog/scrolling-list .

I want a list like this

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li> 
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

And display two at a time, then display them in a loop, 2 at a time.

Even the pseudo code will help me get started.

Answer 1

With the html that you included in your post, you can run the following.

$(document).ready(function(){
    //hide all the list items
    $("ul li").hide();
    //call the function initially
    show_list_item();
});

function show_list_item(){
    //fade in the first hidden item. When done, run the following function
    $("ul li:hidden").first().fadeIn("slow", function(){
       //if there are no more hidden list items (all were shown), hide them all
       if($("ul li:hidden").length == 0){
          $("ul li").hide();
       }
       //call this function again - this will run in a continuous loop
       show_list_item();
    });
}

Answer 2

Just a modification of Yuval's code to get two at a time behavior:

$(document).ready(function(){
    //hide all the list items
    $("ul li").hide();
    //call the function initially
    show_list_item();
});

function show_list_item(){
    //fade in the first hidden item. When done, run the following function
    $("ul li:hidden:first").fadeIn("slow", function(){
       //if there are no more hidden list items (all were shown), hide them all
       if($("ul li:hidden").length == 0){
      $("ul li").hide();
       }
    });
    $("ul li:hidden:first").fadeIn("slow", function(){
       //if there are no more hidden list items (all were shown), hide them all
       if($("ul li:hidden").length == 0){
      $("ul li").hide();
       }
       //call this function again - this will run in a continuous loop
       show_list_item();
    });
}