Скроллинг списка с помощью jQuery

Question

Мой javascript на данный момент не работает, и я зашла в тупик!

Мне нужно создать анимированный список с таким javascript - http://www.fiveminuteargument.com/blog/scrolling-list.

То, что я хочу, это взять список вроде этого

<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>

И отображать два сразу, а затем отображать их в цикле, по 2 за один раз.

Даже псевдокод поможет мне начать.

Answer 1

С помощью HTML, который вы включили в свое сообщение, вы можете запустить следующее.

$(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

Просто модификация кода Ювала, чтобы заставить работать «два за раз»:

$(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();
    });
}