javascript - 使用 JQuery 淡出动画

Question

我有以下代码试图演示和动画飞机起飞队列的出队程序。 对于 5 秒后发生的每次起飞(或出队)，一个盒子应该淡出，直到起飞队列为空后所有盒子都淡出。 我的问题是如何将每个出队的飞机链接到一个盒子，以便每次出队时都有一个盒子淡出？

这是代码片段

function airport() {
  this.takeoff_queue = ["KQA", "ERJ", "TOM", "DHL", "ETH"];
  this.landing_queue = ["RWA", "KLM", "PAN", "FLY540", "JAMBO"];
  console.log('DEPARTING', this.landing_queue, 'ARRIVING', this.takeoff_queue);
}
var departure = new airport();
var takeoff_interval = setInterval(function depart() {
  $("#box1").fadeOut();
  if (departure.takeoff_queue.length != 0) {
    departure.takeoff_queue.shift()
    $("#box1").fadeOut();
    console.log('DEPARTING', departure.takeoff_queue);
  } else {
    clearInterval(takeoff_interval);
    console.log('TAKEOFFS COMPLETE');
  }
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>SIMPLE SIMULATED TAKEOFF</h3>
<div id="box1" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box2" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box3" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box4" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box5" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>

如果这是错误的方法，请向我解释。

Answer 1

在这种情况下如何将每个元素与一些数据(例如它的目的地)相关联，并根据该元素查找元素

function airport() {
  this.takeoff_queue = ["KQA", "ERJ", "TOM", "DHL", "ETH"];
  this.landing_queue = ["RWA", "KLM", "PAN", "FLY540", "JAMBO"];
  console.log('DEPARTING', this.landing_queue, 'ARRIVING', this.takeoff_queue);
}
var departure = new airport();
var takeoff_interval = setInterval(function depart() {
  if (departure.takeoff_queue.length != 0) {
    var dest = departure.takeoff_queue.shift()
    $("[data-dest='" + dest + "']").fadeOut();
    console.log('DEPARTING', departure.takeoff_queue);
  } else {
    clearInterval(takeoff_interval);
    console.log('TAKEOFFS COMPLETE');
  }
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>SIMPLE SIMULATED TAKEOFF</h3>
<div id="box1" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="KQA"></div>
<div id="box2" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="ERJ"></div>
<div id="box3" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="TOM"></div>
<div id="box4" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="DHL"></div>
<div id="box5" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="ETH"></div>