загрузка изображений Ajax + Flickr один-на-один с эффектом FadeIn

Question

я повторно используя этот кусок кода:

$(function() { 
    'use strict'; 
    // Load demo images from flickr: 
    $.ajax({ 
     url: (window.location.protocol === 'https:' ? 
       'https://secure' : 'http://api') + 
       '.flickr.com/services/rest/', 
     data: { 
      format: 'json', 
      method: 'flickr.interestingness.getList', 
      api_key: '' 
     }, 
     dataType: 'jsonp', 
     jsonp: 'jsoncallback' 
    }).done(function (result) { 
     var 
      linksContainer = $('#links'), 
      baseUrl; 
     // Add the demo images as links with thumbnails to the page: 
     $.each(result.photos.photo, function (index, photo) { 
      baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' + 
       photo.server + '/' + photo.id + '_' + photo.secret; 
      $('<a/>') 
       .append($('<img>').prop('src', baseUrl + '_s.jpg')) 
       .hide() 
       .fadeIn('slow') 
       .prop('href', baseUrl + '_b.jpg') 
       .prop('title', photo.title) 
       .attr('data-gallery', '') 
       .appendTo(linksContainer); 
     }); 
    }); 
}); 

Это делает свою грязную работу, но у меня есть FadeIn эффект только со всеми «стенами из фотографии "(их около 50), вместо этого я бы хотел, чтобы для ВСЕХ ОДНОГО ОДНОГО фото jquery применялся эффект fadeIn.

Спасибо всем!

Answer 1

Попробуйте

$(function() { 
    'use strict'; 
    // Load demo images from flickr: 
    $.ajax({ 
     url: (window.location.protocol === 'https:' ? 
       'https://secure' : 'http://api') + 
       '.flickr.com/services/rest/', 
     data: { 
      format: 'json', 
      method: 'flickr.interestingness.getList', 
      api_key: '' 
     }, 
     dataType: 'jsonp', 
     jsonp: 'jsoncallback' 
    }).done(function (result) { 
     var 
      linksContainer = $('#links'), 
      baseUrl; 
     // Add the demo images as links with thumbnails to the page: 
     $.each(result.photos.photo, function (index, photo) { 
      baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' + 
       photo.server + '/' + photo.id + '_' + photo.secret; 
      $('<a/>') 
       .append($('<img>').prop('src', baseUrl + '_s.jpg')) 
       .hide() 
       //.fadeIn('slow') 
       .prop('href', baseUrl + '_b.jpg') 
       .prop('title', photo.title) 
       .attr('data-gallery', '') 
       .appendTo(linksContainer); 
     }); 

     setTimeout(function(){ showImg($('#links a:first'))}, 1000); 
    }); 
}); 

function showImg(el) 
{ 
    el.fadeIn('slow'); 
    if(el.next().is('a')) 
    { 
     setTimeout(function(){ showImg(el.next())}, 1000); 
    } 
}