아약스 + 플리커 이미지로드 하나씩

Question

내가이 코드 조각을 다시 사용하고 fadeIn 효과 :

$(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); 
    } 
}