jQuery fadein fadeout divs over set interval

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

 
 
 This is first content 
 
 
 
 This is second content 
 
 
 
 This is third content 
 
  

因此，在页面加载时，第一个“内容”类将是可见的，在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; } 

Answer 2

尝试使用Cycle Plugin ：

 $('.contentPanel').cycle();