jQuery - Cycle alternate <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">,你可以测试它在这里.你问之前,是的,我公然滥用弱类型的治疗index既是一个布尔和1/ 0的.eq()功能.

这样做是:

• 隐藏前2的任何一个
• 从false(0)索引开始,所以我们先改变第1项
• 每3秒钟(根据需要调整):
  • 淡出当前项目,第一个或第二个,交替
  • 采取下一行(目前是第3项,基于0的索引或2为.eq())并将其插入到此之后,将其淡入
  • 把那个淡出的那个贴在线的尽头
  • 更改索引,以便下次更改另一个索引
  • 在3秒内重复