CODEWITHSUNDEEP
javascripthtmljquerycss
jango
jango

Reputation: 11

Fade elements in/out in sequence

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>

Upvotes: 0

Views: 192

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Andrew Corrigan
Andrew Corrigan

Reputation: 1057

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

Upvotes: 0

Related Questions