html - jQuery images do not fade in -
i have list of image urls in json using put bunch of images in div. start out opacity 0 , supposed fade in loop.
here jquery:
$.ajax('http://thesabreslicer.site.nfoservers.com/thesabreslicer/dw/json/imgs.json').done(function(data) { (var = 0; < 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'); (var = 0; < imgs.length; i++) { if (imgs.eq(i).css('opacity') === 0) { imgs.eq(i).animate({ 'opacity': '1' }, 1000); } } });
and here html div:
<div class="col-md-4"> <div class="text-center"> <h3>technologies use</h3> </div> <div id="imgs" class="col-md-12"> </div> </div>
couple things here. first off, make sure not trying use ajax across different domains or can blocked.
secondly, there no need 2 loops. combine have below:
$.ajax('http://thesabreslicer.site.nfoservers.com/thesabreslicer/dw/json/imgs.json').done(function (data) { (var = 0; < data.length; i++) { var image = data[i]; var newimg = $('<img src="' + image.url + '" class="img-responsive" style="float:left; padding:5px;opacity:0;" />'); $('#imgs').append(newimg); newimg.animate({ 'opacity': '1' }, 1000); } });
one other thing not using 1000 (1 second), hard see. change higher see better results.
you may want check image loaded before fade well. like:
newimg.load(function(){ newimg.animate({ 'opacity': '1' }, 1000); });
Comments
Post a Comment