我如何每5秒随机淡入/淡出一些div

Question

我的代码有问题，我无法弄清楚。我想显示 4 个每 5 秒更改一次的 div，但不知怎的，我的函数不会每 5 秒更改一次，而是每 1 秒左右更改一次。

HTML代码：

<div class="Image"><img src="image1.jpg">1</div>
<div class="Image"><img src="image2.jpg">2</div>
<div class="Image"><img src="image3.jpg">3</div>
<div class="Image"><img src="image4.jpg">4</div>
<div class="Image"><img src="image5.jpg">5</div>
<div class="Image"><img src="image6.jpg">6</div>
<div class="Image"><img src="image7.jpg">7</div>

CSS代码：

div.Image {
display: none;
}

Jquery 代码：

$(document).ready(function(){
var divs = getRandomDivs();

    fadeTheDivs(divs);
});

function getRandomDivs()
{
    return $("div.Image").get().sort(function(){ 
    return Math.round(Math.random())-0.5; //random so we get the right +/- combo
    }).slice(0,4);
}

function fadeTheDivs(divs)
{
setTimeout(function(){
  $(divs).fadeToggle("slow","", function(){
    var divs = getRandomDivs();

    fadeTheDivs(divs);

  });
}, 5000);

有人可以帮助我吗？ JSFiddle：http://jsfiddle.net/FyzXF/113/

Answer 1

这里是使用其他工具的解决方案，例如

promise()

和

delay()

no setTimeOut。检查一下：

$(document).ready(function(){
  var divs = getRandomDivs();
  fadeTheDivs(divs);
});

function getRandomDivs()
{
  return $("div.Image").get().sort(function(){ 
    return Math.round(Math.random())-0.5;
  }).slice(0,4);
}

function fadeTheDivs(divs)
{
  $(divs).fadeIn('slow').delay(3000).fadeOut('slow').promise().done(function(){
   	var divs = getRandomDivs();
  	fadeTheDivs(divs);
  })
}

div.Image {
  display: none;
  width:50px;
  height:50px;
  background:tomato;
  margin:2px;
  color:white;
  line-height:50px;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Image">1</div>
<div class="Image">2</div>
<div class="Image">3</div>
<div class="Image">4</div>
<div class="Image">5</div>
<div class="Image">6</div>
<div class="Image">7</div>

Answer 2

将 setTimeout 延迟更改为 5000 而不是 1000。 设置的超时也需要移到 div 数组之外，因为它是为 div 数组中的每个元素调用的。从而创建 5 秒间隔的恒定流并创建 1 秒效果。

这是代码的工作版本：

    function fadeTheDivs(divs)
{

  setTimeout(function(){
    var divs = getRandomDivs();
    fadeTheDivs(divs);
  }, 5000);

  $(divs).fadeToggle("slow","", function(){

  });

}

http://jsfiddle.net/FyzXF/126/

Answer 3

在每次迭代时显示差异项（Jquery）

通过从下一次迭代中删除“当前”div 来在每次迭代中显示

difference divs

。

您还可以通过以下方式显示要显示的项目数：

const slice_by = 5;

。 （显示 5 项）。

const cards = $("[shuffle_grid] [card]");
const slice_by = 5; /* how many item to show */
const fade_in = 1000;
const fade_out = 1000;
const delay = 2000;

$(`[shuffle_grid] [card]:nth-child(n+${slice_by + 1 })`).css("display", "block")
$(`[shuffle_grid] [card]:nth-child(n+${slice_by + 1 })`).css("opacity", "1")

cards.fadeOut(0);

let all_companies_array = [];
cards.each(function( index ) {
  all_companies_array.push(index.toString());
});

const scrambled_on_load = all_companies_array.sort(() => Math.random() - 0.5);
var items_to_remove = scrambled_on_load.slice(0, slice_by);
getRandomFoods(4, items_to_remove);

function getRandomFoods(count, items_to_remove) {
  // Scrambling the array
  const scrambled = all_companies_array.sort(() => Math.random() - 0.5);

  var newList = scrambled.filter(function(word){
    return !items_to_remove.includes(word);
  })

  const newList_slice = newList.slice(0, slice_by);

  for (let i = 0; i < slice_by; i++) { 
    cards.eq(newList_slice[i]).fadeIn(fade_in).delay(delay).fadeOut(fade_out).promise().done(
      function(){
        if(i == slice_by - 1){
          getRandomFoods(slice_by, items_to_remove);
        }
      })}/* end for loop */

  items_to_remove = newList_slice;
}

[shuffle_grid]{
  display: flex;
  flex-wrap: wrap;
}

[card]{
  font-size: 3rem;
  border-radius: 15px;
  color: darkblue;
  padding: 15px 25px;
  background: lightsalmon;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<section shuffle_grid>  
  <div card>0</div> 
  <div card>1</div>   
  <div card>2</div>
  <div card>3</div>
  <div card>4</div>
  <div card>5</div>
  <div card>6</div>
  <div card>7</div>
  <div card>8</div>
  <div card>9</div> 
  <div card>10</div>
  <div card>11</div>
  <div card>12</div>
  <div card>13</div>
  <div card>14</div> 
  <div card>15</div>
  <div card>16</div>
  <div card>17</div>
  <div card>18</div> 
  <div card>19</div>
  <div card>20</div>
</section>