使用 jQuery 滚动列表答案

【问题标题】：Scolling list with jQuery使用 jQuery 滚动列表
【发布时间】：2010-02-28 23:30:33
【问题描述】：

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

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

即使是伪代码也能帮助我入门。

【问题讨论】：

您提供的链接提供的信息有什么问题？
缺少一个步骤 - 它没有解释如何从上面的列表转到它所描述的效果。我的 javascript 不够好，无法了解如何添加/删除元素。
嗨，克里斯。我是那个教程的作者。我的目标是详细说明每一步，所以如果有任何遗漏，我很抱歉。该代码可在文章的开头下载，我建议您从这里开始。如果您有任何具体问题，我很乐意回答 - 最好是通过位于我网站上“联系人”链接后面的电子邮件地址。
谢谢 Bobby - 我确实经历了它，但不确定如何从列表到结果。应该是读得不够透彻。无论如何，客户改变了主意，所以努力是徒劳的！

标签： jquery list scroll

【解决方案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();
    });
}

【讨论】：

谢谢 yuval - 我得到 $("ul li:hidden") is not a function error 当它运行时。不过我使用的是 1.3.2，所以不知道为什么。
你是否包含了 jQuery？这是当你得到一个带有美元符号的非函数时首先想到的。你有其他的 JS 库吗？尝试在仅包含 jquery、此代码和 html 的页面中对此进行测试。它应该在 1.3.2 中没有问题。还要确保用 <script type="text/javascript">...</script> 包装你的 js 或将其包含在单独的文件中。告诉我进展如何。
嗯，同样的错误 - 我把纯 html 文件放在这里：jonesonter.notomato.com.au/wp-content/themes/jonesonter/….
正确的选择器是$('ul li:hidden :first') 而不是$('ul li:hidden').first()
现在我收到警告 - 未知类或伪类元素：隐藏。

【解决方案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();
    });
}

【讨论】：