Javascript 使用JQuery淡出动画

我有下面的代码，试图演示飞机起飞队列的排队过程并设置其动画。 对于5秒后发生的每次起飞（或出列），一个盒子应该淡出，直到在起飞队列为空后所有盒子都淡出。 我的问题是，如何将每个平面出列链接到一个框，以便每次出列时一个框消失

这是代码snipet

功能机场（）{
this.u queue=[“KQA”、“ERJ”、“TOM”、“DHL”、“ETH”]；
this.landing_queue=[“RWA”、“KLM”、“PAN”、“FLY540”、“JAMBO”]；
console.log（'出发'，此.landing\u队列，'到达'，此.takeup\u队列）；
}
var出发=新机场（）；
var起飞间隔=设定间隔（函数）{
$（“#框1”）.fadeOut（）；
如果（出发点起飞队列长度！=0）{
出发.起飞队列.班次（）
$（“#框1”）.fadeOut（）；
控制台日志（出发、出发、起飞队列）；
}否则{
净空间隔（起飞间隔）；
控制台日志（“起飞完成”）；
}
}, 5000);

简易模拟起飞
在您的setInterval调用中，您正在不断地淡出
#div1
，只应淡出一次。我相信你想要的是
$（“div:visible:first”）.fadeOut（）：

在您的setInterval调用中，您正在不断地淡出
#div1
，只应淡出一次。我相信你想要的是
$（“div:visible:first”）.fadeOut（）：

如何将每个元素与一些数据关联起来，例如本例中的目的地，并根据这些数据查找元素


功能机场（）{
this.u queue=[“KQA”、“ERJ”、“TOM”、“DHL”、“ETH”]；
this.landing_queue=[“RWA”、“KLM”、“PAN”、“FLY540”、“JAMBO”]；
console.log（'出发'，此.landing\u队列，'到达'，此.takeup\u队列）；
}
var出发=新机场（）；
var起飞间隔=设定间隔（函数）{
如果（出发点起飞队列长度！=0）{
var dest=出发点起飞队列移位（）
$（“[data dest='”+dest+']”）.fadeOut（）；
控制台日志（出发、出发、起飞队列）；
}否则{
净空间隔（起飞间隔）；
控制台日志（“起飞完成”）；
}
}, 5000);

简易模拟起飞
如何将每个元素与一些数据关联起来，例如本例中的目的地，并根据这些数据查找元素


功能机场（）{
this.u queue=[“KQA”、“ERJ”、“TOM”、“DHL”、“ETH”]；
this.landing_queue=[“RWA”、“KLM”、“PAN”、“FLY540”、“JAMBO”]；
console.log（'出发'，此.landing\u队列，'到达'，此.takeup\u队列）；
}
var出发=新机场（）；
var起飞间隔=设定间隔（函数）{
如果（出发点起飞队列长度！=0）{
var dest=出发点起飞队列移位（）
$（“[data dest='”+dest+']”）.fadeOut（）；
控制台日志（出发、出发、起飞队列）；
}否则{
净空间隔（起飞间隔）；
控制台日志（“起飞完成”）；
}
}, 5000);

简易模拟起飞
尝试利用


功能机场（）{
this.u queue=[“KQA”、“ERJ”、“TOM”、“DHL”、“ETH”]；
this.landing_queue=[“RWA”、“KLM”、“PAN”、“FLY540”、“JAMBO”]；
console.log（'出发'，此.landing\u队列，'到达'，此.takeup\u队列）；
}
var出发=新机场（）；
$（文档）.queue（“q”，$.map（出发.u队列，函数（val，键）{
//将`class``出发.起飞队列`value添加到`div`
$（“div[id^=box]”）.eq（key）.addClass（val）；
返回函数（下一步）{
//通过“出发.起飞”队列“值”类选择“div”`
$（“div[class=“+val+”]）。延迟（5000）。淡出（0，函数（）{
log（“离开：+this.className”）；
下一个（）
})
}
})).dequeue（“q”）.promise（“q”）.done（函数（）{
控制台日志（“起飞完成”）
});

简易模拟起飞
尝试利用


功能机场（）{
this.u queue=[“KQA”、“ERJ”、“TOM”、“DHL”、“ETH”]；
this.landing_queue=[“RWA”、“KLM”、“PAN”、“FLY540”、“JAMBO”]；
console.log（'出发'，此.landing\u队列，'到达'，此.takeup\u队列）；
}
var出发=新机场（）；
$（文档）.queue（“q”，$.map（出发.u队列，函数（val，键）{
//将`class``出发.起飞队列`value添加到`div`
$（“div[id^=box]”）.eq（key）.addClass（val）；
返回函数（下一步）{
//通过“出发.起飞”队列“值”类选择“div”`
$（“div[class=“+val+”]）。延迟（5000）。淡出（0，函数（）{
log（“离开：+this.className”）；
下一个（）
})
}
})).dequeue（“q”）.promise（“q”）.done（函数（）{
控制台日志（“起飞完成”）
});

简易模拟起飞
感谢您的帮助。不过，我并不完全理解它，因为我只是尝试更多地使用JQuery。感谢您的帮助。然而，我并不完全理解它，因为我只是冒险更多地使用JQuery，这就解决了眼前的问题。非常感谢，先生！！这就解决了眼前的问题。非常感谢，先生！！将每个元素与一些数据关联起来是非常有见地的，因为当我设置覆盖着陆队列的其他部分的动画时，它也会帮助我。非常感谢。如果我陷入困境，我希望得到您的帮助：）将每个元素与一些数据关联起来是非常有见地的，因为当我为覆盖着陆队列的其他部分设置动画时，它也会帮助我。非常感谢。如果我陷入困境，我希望得到您的帮助：）
var takeoff_interval = setInterval(function depart() {
    if (departure.takeoff_queue.length != 0) {
        departure.takeoff_queue.shift()
        $("div:visible:first").fadeOut();
        console.log('DEPARTING', departure.takeoff_queue);
    } else {
        clearInterval(takeoff_interval);
        console.log('TAKEOFFS COMPLETE');
    }
}, 5000);