按顺序淡入/淡出元素

Question

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

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

我打算使用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 毫秒，然后再转到循环中的下一个点