Ускорить анимацию с помощью JQuery

Question

У меня есть следующий код, который пытается продемонстрировать и анимировать процедуру деоклирования очереди взлета воздушного судна. Для каждого взлета (или dequeue), который происходит через 5 секунд, предполагается, что окно будет исчезать до тех пор, пока все не исчезнут после того, как очередь взлета пуста. Моя проблема заключается в том, как связать каждую плоскость dequeue с ящиком, чтобы при каждом удалении ящик исчезал?

Вот код snipet

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 example

Answer 3

Try используя .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>