Fade out experiment

Fade in, on click keep that box and randomly fade out all others

HTML

<div id="container">
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
<div class="ctn"></div>
</div>

CSS

body{padding:10px;}
.ctn{width:50px;height:50px;background:#dedede;float:left;margin-right:10px;margin-bottom:10px}

JavaScript

$(document).ready(function() {
    var ctn = $('.ctn' , '#container');
    var ctnLength = ctn.length;
       
    function randomFadeOut(i){  
        var random;
        var e = 0;
        while (e < ctnLength) { 
            random = Math.random() * 1000;
            $(ctn[e]).not(i).delay(random).animate({ opacity : 0 });
            e++;
        }        
    }
    

    
    
    ctn.on('click', function(){
      var i = $(this);
      randomFadeOut(i);
    });
});