设置间隔上的jQuery fadein淡出divs

我想淡出收藏中的第一个div，然后淡入下一个div。淡入淡出将在设定的时间触发。集合中的项目数为1到n。这里是一个html的例子

<div class="contentPanel">
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is first content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is second content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is third content
         </div>
      </div>
   </div>

这是第一个内容
这是第二个内容
这是第三个内容

因此，在页面加载时，第一个“内容”类将是可见的，在x时间量之后，当前的“内容”将淡出，而下一个“内容”将淡入。当它到达第n个“内容”时，它将重新开始，淡出第n个“内容”，淡出第一个“内容”。此行为将持续循环。

尝试使用：

---

你可以做一些非常紧凑的事情，比如：

function fadeContent() {
  $(".content:hidden​​​​​​​​​​​​​​​​​​​​​​​:first").fadeIn(500).delay(2000).fadeOut(500, function​​​​​() {
      $(this).appendTo($(this).parent()); //stick current at the end
      fadeContent(); //loop
  });
}
fadeContent(); //kick it off the first time

.contentPanel .content { display: none; }

。这会使第一个元素在500毫秒内淡出，保持2000毫秒，在500毫秒内淡出，将元素置于列表末尾，然后淡出列表中的第一个元素，冲洗，重复。除此之外，您唯一需要的是CSS，以便最初将它们全部隐藏，如下所示：

function fadeContent() {
  $(".content:hidden​​​​​​​​​​​​​​​​​​​​​​​:first").fadeIn(500).delay(2000).fadeOut(500, function​​​​​() {
      $(this).appendTo($(this).parent()); //stick current at the end
      fadeContent(); //loop
  });
}
fadeContent(); //kick it off the first time

.contentPanel .content { display: none; }

---

@Dawkta——你必须更具体一点，“不起作用”从来都没有帮助。我猜您的项目标记与您发布的不同，因此可能需要相应调整，如果您使用实际代码进行更新，我可以向您展示如何进行更新。NM我没有看到您显示工作代码的链接。那是一个很酷的页面。我现在可以用了。我脑子里有一个时尚元素。谢谢你的回复，这正是我想要的。这对我帮助很大，摆脱了setInterval:d0，非常酷和简单。谢谢你，非常简单，简短，方便。