Randomize image fadeIn

by kyllle

HTML

<div id="container">
    
    <img src="http://dummyimage.com/50/000/000" />
    <img src="http://dummyimage.com/50/000/000" />
    <img src="http://dummyimage.com/50/000/000" class="noRight" />
    <img src="http://dummyimage.com/50/000/000" />
    <img src="http://dummyimage.com/50/000/000" />
    <img src="http://dummyimage.com/50/000/000" class="noRight" />
    <img src="http://dummyimage.com/50/000/000" />
    <img src="http://dummyimage.com/50/000/000" />
    <img src="http://dummyimage.com/50/000/000" class="noRight" />
    
</div>

CSS

div{
    width: 170px;
}

div img{
    display: block;
    float: left;
    width: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}

div img.noRight{
    margin-right: 0;
}

JavaScript

var randomNumber = Math.floor(Math.random()*$('#container').children().length);
console.log(randomNumber);

$(document).ready(function(){
   $('#container > img').hide(); 
   
    
    setTimeout(function(){
        $('#container > img:eq(' + randomNumber + ')').fadeIn(); 
    }, 500);
});