I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop.
Here is the jQuery code snippet:
$.ajax('http://example.com/images.json').done(function(data) {
for (var i = 0; i < data.length; i++) {
var image = data[i];
$('#imgs').append('<img src="' + image.url + '" class="img-responsive" style="float:left; padding:5px;opacity:0;">');
}
var imgs = $('#imgs > img');
for (var i = 0; i < imgs.length; i++) {
if (imgs.eq(i).css('opacity') === 0) {
imgs.eq(i).animate({
'opacity': '1'
}, 1000);
}
}
});
And here is the HTML structure for the div:
<div class="col-md-4">
<div class="text-center">
<h3>Our Image Gallery</h3>
</div>
<div id="imgs" class="col-md-12">
</div>
</div>