javascript - 使用 setinterval() 30s 更改四个 div 一次

Question

我想显示四个 div 一次但一个循环。如果 30 秒后先显示 4 个 div，则 30 秒后先显示 4 个 div，然后再隐藏 4 个 div，30 秒后再显示 4 个 div，然后隐藏 4 个 div，如此重复。怎么做？

<div class="list-div">  
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
</div>

Answer 1

您可以向元素添加类，然后使用 .toggle()在 jquery 中隐藏/显示 div。下面的示例每 3 秒切换隐藏/显示您的 div:

$('.div-2').hide();

setInterval(function() {
  $('.div-1').toggle();
  $('.div-2').toggle();
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-div">  
    <div class="div-1">Content</div>
    <div class="div-1">Content</div>
    <div class="div-1">Content</div>
    <div class="div-1">Content</div>
    <div class="div-2">Content1</div>
    <div class="div-2">Content1</div>
    <div class="div-2">Content1</div>
    <div class="div-2">Content1</div>
</div>

或者不使用 :lt() 添加类和 :gt() :

$('.list-div div:gt(3)').hide();

setInterval(function() {
  $('.list-div div:lt(4)').toggle();
  $('.list-div div:gt(3)').toggle();
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-div">  
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
</div>