按顺序淡入/淡出元素

Question

我创建了一个数组来存储按钮的id。按钮ID为#red、#green、#blue和#yellow

我创建了另一个函数，随机选择一种颜色并将其存储在另一个数组中。

我打算使用for循环迭代第二个数组，并在按钮上使用淡入/淡出效果，这样结果将是有序的淡入和淡出效果。

例如：

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

首先是红色按钮的淡入淡出，然后是绿色，最后是蓝色。

我得到的结果是一种几乎同时出现的淡出效果。有人能提供一个解决方案并告诉我为什么会发生这种情况吗？

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

您的代码的问题是因为您在同一时间运行所有的淡入淡出效果。

您可以通过随机化输入数组的顺序来简化方法和代码，然后对其进行迭代以淡入/淡出相关元素，并为每个元素添加增量延迟，以便在序列中一次只发生一次淡入。试试这个：

// 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默认情况下是异步的，这意味着它不会等待淡入/淡出，除非你明确告诉它这样做。

我建议使用一个简单的setTimeout命令，请参阅此处了解更多信息和替代

例如，如果您更改此部分：

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

对此：

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

它将等待2000毫秒，然后进入循环中的下一个点