使用JQuery淡出动画

Question

I have the following code that attempts to demonstrate and animate a dequeuing procedure of an aircraft takeoff queue. For every takeoff (or dequeue) which happens after 5 seconds, a box is supposed to fade out until all have faded out after the takeoff queue is empty. My problem is how do i link each plane dequeue to a box such that for every dequeue a box fades out?

Here is the code 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> 

If this is a wrong approach kindly explain it to me.

Answer 1

How about associating each element with some data such as its destination in this case, and look for the element based on that

 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

Within your setInterval call, you're continually fading #div1 which only should be faded once. I believe what you're after is $("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 utilizing .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>