Fade out experiment

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

by kyllle

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.hide();
    ctn.each(function(i,e){
        $(e).delay(100*i).fadeIn();
    });
    
    ctn.on('click', function(){
      var i = $(this);
      randomFadeOut(i);
    });
});