jQuery - 循环替代 <li> 的？

Question

在我当前正在开发的网站上，我正在尝试循环加载 <li>的，但在交替的时间。例如:

1. 首先，我将展示前两个 <li>项目。
2. 第 1 项将会淡出。
3. 第 3 项将淡入，代替第 1 项。
4. 第 2 项将会淡出。
5. 第 4 项将淡入，代替第 2 项。

HTML:

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

知道如何才能达到这种效果吗？ 谢谢!

Answer 1

你可以这样做(可以进一步简化):

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

这只是给出 <ul>和 id 以便更快地工作:<ul id="items"> , you can test it out here 。在你问之前，是的，我公然滥用弱类型来治疗 index作为 bool 值和 1/0对于 .eq() 功能。

它的作用是:

• 隐藏前 2 个之后的任何内容
• 以 false 开头( 0 ) 索引，因此我们首先更改第 1 项
• 每 3 秒(根据需要调整):
  • 交替淡出当前项目(第一个或第二个)
  • 取出行中的下一项(当前为第三项，基于 0 的索引或 2 表示 .eq() )并将其插入到刚刚所在的位置之后，将其淡入
  • 将淡出的那条粘在行尾
  • 更改索引，以便我们下次更改其他索引
  • 3 秒后重复