jQuery Fadein淡入淡出div超过设置的时间间隔

jQuery fadein fadeout divs over set interval

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

1
2
3
4
5
6
7
8
9
10
11

This is first content

This is second content

This is third content

因此，在页面加载时，第一个" content"类将可见，经过x倍的时间，当前" content"将淡出，而下一个" content"将淡入。当到达第n个" content"时将重新开始，淡出第n个"内容"，然后淡入第一个"内容"。此行为将连续循环。

您可以执行以下紧凑的操作：

1
2
3
4
5
6
7

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，以将它们全部隐藏起来，如下所示：

1	.contentPanel .content { display: none; }