jQuery Fadein淡入淡出div在设置间隔 [英] jQuery fadein fadeout divs over set interval

问题描述

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

I want to fadeOut the first div in a collection and then fadeIn the next div. The fade in out would trigger at a set time. The number of items in the collection is 1 to n. Here is an example of the 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个内容"，然后淡入第一个内容".这种行为会不断循环.

So on page load the first "content" class would be visible, after x amount of time, the current "content" would fadeout and the next "content" would fade in. When it got to the nth "content" it would start over, fadeout the nth "content" and fadein the first "content". This behavior would loop continuously.

推荐答案

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

You could do something pretty compact like this:

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

You can see a working example with your exact markup here. This fades the first element in over 500ms, leaves it for 2000ms, fades it out over 500ms, puts the element at the end of the list, and fades in the first in the list, rinse, repeat. The only addition to this you need is CSS to initially hide them all, like this:

.contentPanel .content { display: none; }

这篇关于jQuery Fadein淡入淡出div在设置间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！