Question

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

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

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

我有一点工作，就在我添加更多div时。

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

您需要一个变量来跟踪当前可见的div。此外，建议您使用课程来选择所有div，否则您必须按标记名称选择它们，如果您有其他setInterval() s，则会出现问题不应该被包括在内。

您只需要div并在其中首先隐藏所有div，然后使用当前索引显示div，最后增加当前索引变量（如果它仍然小于var current = 0; setInterval(function() { var divs = $(".roll").hide(); divs.eq(current).fadeIn("normal"); if (current < divs.length - 1) current++; else current = 0; }, 1000); s的数量，否则将其重置为0.

＆＃13;

.roll {
  display: none
}

＆＃13;

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

＆＃13;

setInterval()

＆＃13;

要只执行一个循环，您需要存储clearInterval()的ID并在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);中使用它来停止。以下是您评论中要点的解决方案：

＆＃13;

.roll {
  display: none
}

#a {
  display: block;
}

＆＃13;

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

＆＃13;

select hd.*
from hotel_detail hd
where str_to_date(hd.invoice_date, '%m/%d/%Y') =
          (select max(str_to_date(hd2.invoice_date, '%m/%d/%Y'))
           from hotel_detail hd2
           where hd2.hotel_property = hd.hotel_property
          );

＆＃13;

Answer 2

这是基本功能Jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

根据时间间隔显示和隐藏

4 个答案: