Fade out experiment - Official

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;cursor:pointer;}

JavaScript

$(document).ready(function() {
    var $ctn = $('.ctn' , '#container');
    var len = $ctn.length;
       
    function randomFadeOut(i){  
        var random;
        var e = 0;
        while (e < len) { 
            random = Math.random() * 1000;
            $($ctn[e]).not(i).delay(random).animate({ opacity : 0 });
            e++;
        }        
    }
    
    $ctn.hover(function() {
        //console.log($(this));
        if( $(this).is(':visible') ) {
          console.log('is visible');
        }
        
        $(this).animate({
            opacity: 0.5
        }, 200);
        }, function() {
        $(this).animate({
            opacity: 1
        }, 200);
    
               
    });
    
    $ctn.hide();
    $ctn.each(function(i,e){
        $(e).delay(100*i).fadeIn();
    });
    
    $ctn.on('click', function(){
      var i = $(this);
      randomFadeOut(i);
    });
});