javascript - understanding how $.promise works similar to transitionEnd -

i messing around on documentation page of jquery.promise() , came across following peice of code :

$("button").on("click", function () {     $("p").append("started...");      $("div").each(function (i) {         $(this).fadein().fadeout(1000 * (i + 1));     });     $("div").promise().done(function () {         $("p").append(" finished! ");     });  }); 

fiddle here

now understand $.defer in jquery assists in asynchronous programming, understand $.done , $.fail part of $promise object .

i have read interesting article here. there few examples of how $.defer can used monitor css-3 transitions.

however in fiddle example provide, fail understand how $.promise picks fact transition complete. how promise pick that fadeout() complete?

how below piece of code work?

$("div").promise().done(function () {             $("p").append(" finished! ");         });  

how promise working here? can explain?

to put simply, jquery creates queue of deferred objects on each object returned $("div") selector (these visible using .data() function).
when add css animations divs jquery functions such fadein() or fadeout(), creates deferred objects appended each individual div queues. using$("div").promise().done() on parent collection allows check if of children deferred object queues empty (jquery iterate on children elements).