根据时间间隔显示和隐藏

Question

我想根据时间间隔显示和隐藏一系列divs。

4秒后显示div 1，再过4秒后显示div 2，依此类推。

之前的div被隐藏，因此看起来好像新信息正在替换之前和时间间隔。

我有一点工作，就在我添加更多divs的时候。

setInterval(function() {
  $("#a").hide();
  setTimeout(function() {
    $("#b").fadeIn('normal');
  });
}, 4000);

#b, #c {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>

https://jsfiddle.net/Layt8cuy/1/

默认情况下，第一个div需要在那里，并且它们停在最后一个div，没有循环回到开头。

Answer 1

这是基本功能Jsfiddle

var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
  if (count == 5) {
    clearInterval(myInterval);
  } else {
    count++;
    currentDiv.hide();
    currentDiv = currentDiv.next();
    currentDiv.show();
  }
}, 2000);

#b,
#c,
#d,
#e {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
<div id="e">5</div>

Answer 2

你需要一个变量来跟踪当前可见的div。此外，建议使用一个类来选择所有divs，否则你必须按标签名称选择它们，如果你有其他不应包括的divs，这是一个问题。

你只需要setInterval()并在其中首先隐藏所有divs，然后用当前索引显示div，最后增加当前索引变量，如果它仍然小于divs的数量，否则将其重置为0。

var current = 0;

setInterval(function() {
  var divs = $(".roll").hide();
  divs.eq(current).fadeIn("normal");
  if (current < divs.length - 1)
    current++;
  else
    current = 0;
}, 1000);

.roll {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="roll">1</div>
<div id="b" class="roll">2</div>
<div id="c" class="roll">3</div>

要只做一个循环，你需要存储setInterval()的ID并在clearInterval()中使用它来停止。以下是您评论中各点的解决方案：

var current = 0;

var divs = $(".roll");
var timer = setInterval(function() {
  if (current < divs.length - 1) {
    divs.eq(current).hide();
    current++;
    divs.eq(current).fadeIn("normal");
  } else
    clearInterval(timer);
}, 1000);

.roll {
  display: none
}

#a {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="roll">1</div>
<div id="b" class="roll">2</div>
<div id="c" class="roll">3</div>

Answer 3

一个工作的例子，完成后返回第一个div 递归+超时 你可以使用相同的方法：

let duration = 1000, // these are miliseconds
  activeIndex = 0;  // first item to activate

function activateNext() {
  let boxes = $('.boxes > div');

  // activate current item
  boxes.addClass('hide').eq(activeIndex).removeClass('hide');
  
  // increase activeIndex and make reset at end of collection 
  if (++activeIndex >= boxes.length) activeIndex = 0;
  
  // run the function again after duration
  setTimeout(function() {
    activateNext(activeIndex);
  }, duration)
}

// start the loop
$(window).on('load', activateNext);

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

没有循环回到第一个：

let duration = 1000, // these are miliseconds
  activeIndex = 0;  // first item to activate

function activateNext() {
  let boxes = $('.boxes > div');

  // activate current item
  boxes.addClass('hide').eq(activeIndex).removeClass('hide');
  
  // increase activeIndex and make reset at end of collection 
  if (++activeIndex < boxes.length) {
  
  // run the function again after duration
  setTimeout(function() {
    activateNext(activeIndex);
  }, duration)
  }
}

// start the loop
$(window).on('load', activateNext);

  .hide {
      display: none;
    }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="boxes">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

Answer 4

您可能还会考虑纯CSS解决方案：

#a, #b, #c {
  position: absolute;
  animation: hide 4s linear forwards;
}

#b, #c {opacity: 0}

#b {
  animation-delay: 4s;
}

#c {
  animation-name: last;
  animation-delay: 8s;
}

@keyframes hide {
  0%, 99.99% {opacity: 1}
  100% {opacity: 0}
}

@keyframes last {
  0%, 100% {opacity: 1}
}

<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>