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>

一次显示两个，然后一个循环显示它们，一次显示两个。

即使伪代码也会帮助我开始。

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

只是修改了Yuval的代码，让“一次两个”行为正常工作：

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

使用jQuery滚动列表

2 个答案: