I've set up an array to store the IDs of buttons, which are identified as #red, #green, #blue, and #yellow
In addition, I've created a function that randomly selects a color and saves it in another array.
My goal is to loop through the second array using a for loop and apply a fade in/out effect on the buttons for an orderly transition effect.
For instance:
array = ['red','green','blue'];
The red button fades in and out first, followed by green, and finally blue.
However, instead of seeing a sequential fading effect, I notice that the buttons seem to fade almost simultaneously. Could someone please suggest a solution and explain why this is happening?
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>