jQuery fadein fadeout divs over set interval

Question

我想fadeOut集合中的第一个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个"内容"并淡出第一个"内容".这种行为会不断循环.

Answer 1

你可以做一些非常紧凑的事情:

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

您可以在此处查看具有确切标记的工作示例.这使得第一个元素在500毫秒内消失,离开它2000毫秒,淡出500毫秒,将元素放在列表的末尾,并在列表的第一个淡入淡出,重复.你需要的唯一的补充是CSS最初隐藏所有,如下所示:

.contentPanel .content { display: none; }