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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -