阿賈克斯+ Flickr的圖像加載一個接一個與淡入效果

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

這讓他的骯髒的工作，但我只用整個「牆淡入效果的照片「（他們是約50），而是我會爲每個單一的照片jquery應用淡入淡出效果。

謝謝大家！

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