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

 2021-02-23 

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; }


尝试使用循环插件:

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