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 = $('#container .ctn');
    var len = $ctn.length;

    function randomFadeOut() {
        var $r = $ctn.not($(this));
        var e = 0;
        while (e < len) {            
            $r.eq(e).delay(Math.random() * 500).animate({ opacity: 0 });
            e++;
        }
    }

    $ctn.hide().click(randomFadeOut).each(function(v) {
        $(this).delay(50 * v).fadeIn();
    });
});