jQuery - Cycle alternate <li>的？</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视为.eq()函数的布尔值和1 / 0。

这是做什么的：

• 隐藏过去的第2个
• 从false（0）索引开始，因此我们首先更改第1项
• 每3秒钟（根据需要调整）：
  • 淡出当前项目，无论是第一项还是第二项，交替
  • 采取下一行（目前是第3项，基于0的索引或2的{​​{1}}）并将其插入到此之后的地方，将其淡入
  • 把那个淡出的那个贴在行尾
  • 更改索引，以便我们下次更改其他
  • 在3秒内重复