Fade elements in/out in sequence

Question

I created an array that stores the ids of buttons. Button ids are #red, #green, #blue and #yellow

I created another function the randomly selects a color and stores it inside of another array.

I am tying to iterate the second array using a for loop and use a fade in/out effect on the buttons so the outcome will be an ordered fade in and out effect.

For example:

array = ['red','green','blue'];

First the red button fades in and out then the green and lastly the blue.

The outcome I get is a fade in and out effect almost at the same time. Can anybody please provide a solution and tell me why it happens?

var buttonColours = ["red", "blue", "green", "yellow"];
var GamePattern = [];

function nextSequence() {
  var randomNumber = Math.floor((Math.random() * 4));
  var randomChosenColour = buttonColours[randomNumber]
  GamePattern.push(randomChosenColour);
}

function playSequence(sequence) {
  for (var i = 0; i < sequence.length; i++) {
    $("#" + sequence[i]).fadeOut(1000).fadeIn(1000)
  }
}

nextSequence()
nextSequence()
nextSequence()
playSequence(GamePattern)

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
  <div lass="row">
    <div type="button" id="green" class="btn green"></div>
    <div type="button" id="red" class="btn red"></div>
  </div>
  <div class="row">
    <div type="button" id="yellow" class="btn yellow"></div>
    <div type="button" id="blue" class="btn blue"></div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

score 1 · Answer 1 · answered Jan 06 '22 at 11:49

The issue with your code is because you run all the fade effects at the same itme.

You can simplify the approach and the code by randomising the order of your input array and then iterating through it to fade in/out the relevant elements, adding an incremental delay to each so that only one fade happens at a time in sequence. Try this:

// shuffle logic credit: https://stackoverflow.com/a/2450976/519413 @coolaj86
function shuffle(array) {
  let currentIndex = array.length,  randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

var buttonColours = ["red", "blue", "green", "yellow"];
shuffle(buttonColours).forEach((id, i) => {
  $('#' + id).delay(i * 2000).fadeOut(1000).fadeIn(1000);
});

.container .row {
  display: inline-block;
}
.container .row .btn {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.btn.green { background-color: #0C0; }
.btn.red { background-color: #C00; }
.btn.yellow { background-color: #CC0; }
.btn.blue { background-color: #00C; }

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
  <div class="row">
    <div type="button" id="green" class="btn green"></div>
    <div type="button" id="red" class="btn red"></div>
  </div>
  <div class="row">
    <div type="button" id="yellow" class="btn yellow"></div>
    <div type="button" id="blue" class="btn blue"></div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

score 0 · Answer 2 · answered Jan 06 '22 at 11:45

Javascript is by default asynchronous - meaning it won't wait for the fade in/out unless you explicitly tell it to do so.

I'd advise using a simple setTimeout command, see here for more information and alternatives

For example, if you change this part:

for (var i=0 ; i<sequence.length ; i++){
    $("#" + sequence[i]).fadeOut(1000).fadeIn(1000)
}

To this:

for (var i=0 ; i<sequence.length ; i++){
    setTimeout(function() {
         $("#" + sequence[i]).fadeOut(1000).fadeIn(1000)
    }, 2000)
}

It will wait 2000 miliseconds before going to the next point in the loop

thank you for the explanation , I understand what you said but it still dosnt work , more then that when i print the i variable that used in the set timeout function its has the value of the length of the array for some reason and doesn't change as the loop iterates . — jango, Jan 06 '22 at 12:48

Fade elements in/out in sequence

2 Answers2