使用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> 

Answer 2

在您的setInterval調用中，您不斷使#div1淡入淡出，該淡入僅應淡入一次。 我相信您需要的是$("div:visible:first").fadeOut(); ：

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);

jsFiddle示例

Answer 3

嘗試利用.queue（）

 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(); $(document).queue("q", $.map(departure.takeoff_queue, function(val, key) { // add `class` `departure.takeoff_queue` value to `div` $("div[id^=box]").eq(key).addClass(val); return function(next) { // select `div` by `departure.takeoff_queue` value `class` $("div[class="+val+"]").delay(5000).fadeOut(0, function() { console.log("DEPARTING:" + this.className); next() }) } })).dequeue("q").promise("q").done(function() { console.log("TAKEOFFS COMPLETE") }); 

 <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>