fadeIn images - bootstrap + JQuery

fadeIn images - bootstrap + JQuery

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">



    <div class="row">
        <img src="#" class="img-thumbnail">
        <img src="#" class="img-thumbnail">
        <img src="#" class="img-thumbnail">
        <img src="#" class="img-thumbnail">
        <img src="#" class="img-thumbnail">
        <img src="#" class="img-thumbnail">
        <img src="#" class="img-thumbnail">
        </div>

CSS

body {
  padding-top: 50px;
}
.template {
  padding: 40px 15px;
  text-align: center;
}


img { 
opacity: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.animate { 
    opacity: 1;
}

JavaScript

$(function () {
    var speed = 300;
    // WITH JQUERY
/*$('.container img').hide().each(function (i,element) {
        var mycol = Math.floor(Math.random() * 16777215).toString(16);
        $(element).attr('src', "http://placehold.it/90x90/" + mycol + "&text=andrew");
        $(this).delay((i++) * speed).fadeTo(1000, 1);
    });
*/

        // WITH CSS3
 
        
$('img').each(function (i,element) {
        var mycol = Math.floor(Math.random() * 16777215).toString(16);
        $(element).attr('src', "http://placehold.it/90x90/");
    // .after("<span>"+decodeURIComponent(textline())+"</span>")
     $('img').load(function() {
     // $(this).delay((i++) * speed).addClass("animate");
  setTimeout(function(){
        $(element).addClass("animate");
}, i * speed );
});  
    });
        

    
});// end