jQuery изображения не исчезают в

Question

У меня есть список URL-адресов изображений в JSON, которые я использую, чтобы добавить кучу изображений в div. Они начинаются с непрозрачности 0, и они должны исчезать с помощью цикла for.

Вот JQuery:

$.ajax('http://thesabreslicer.site.nfoservers.com/thesabreslicer/dw/json/imgs.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); 
     } 
    } 
}); 

А вот HTML DIV:

<div class="col-md-4"> 
    <div class="text-center"> 
     <h3>Technologies We Use</h3> 
    </div> 
    <div id="imgs" class="col-md-12"> 

    </div> 
</div> 

Answer 1

Пара вещей здесь. Прежде всего, убедитесь, что вы не пытаетесь использовать AJAX для разных доменов или можете заблокироваться.

Во-вторых, нет необходимости в двух петлях. Я бы объединить его, как я ниже:

$.ajax('http://thesabreslicer.site.nfoservers.com/thesabreslicer/dw/json/imgs.json').done(function (data) { 
    for (var i = 0; i < 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); 
    } 
}); 

Еще одна вещь, не в том, что вы используете 1000 (1 секунда), поэтому его трудно увидеть. Измените это на что-то большее, чтобы увидеть лучшие результаты.

Возможно, вы захотите также проверить, что изображение загружено, прежде чем вы будете исчезать. Вы могли бы сделать что-то вроде:

newImg.load(function(){ 
    newImg.animate({ 
     'opacity': '1' 
    }, 1000); 
});