CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daren Smit
Daren Smit

Reputation: 76

How do i fade in/out a number of divs randomly every 5 seconds

I have a problem with my code that i can't figure out. I want to show 4 divs that change every 5 seconds but somehow my function won't change every 5 seconds but every 1 second or so.

Html Code:

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

div.Image {
display: none;
}

Jquery Code:

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

Can someone please help me? JSFiddle: http://jsfiddle.net/FyzXF/113/

Upvotes: 0

Views: 806

Answers (3)

Ezra Siton
Ezra Siton

Reputation: 7741

Show on each iteration Difference items (Jquery)

Show on every iteration difference divs by removing from the next iteration the "current" divs.

Also you can how many items to show by: const slice_by = 5;. (Show 5 items).

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>

Upvotes: 0

DaniP
DaniP

Reputation: 38252

Here is a solution using another tools like promise() and delay() no setTimeOut. Check this:

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

Upvotes: 1

DominicValenciana
DominicValenciana

Reputation: 1731

Change your setTimeout delay to 5000 instead of 1000. The set time out also needs to be moved outside of the div array because it is being called for each element in the div array. Thus creating a constant stream of 5 second intervals and creating the 1 second effect.

Here is a working version of the code:

    function fadeTheDivs(divs)
{

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

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

  });

}

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

Upvotes: 1

Related Questions