按顺序淡入/淡出元素

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>

Answer 1

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>

Answer 2

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