jQueryは、JSONグラブ

Question

を順番に（順番に）順番に（FlickrからグラブしてjQueryで組み立てた後）順番にフェードインしようとした後、イメージを順番にフェードインします。現在、コードはすべて一緒にフェードします。

eachの機能のために、imageLがdivに1つずつ追加されているので、私は技術的に次々とフェードしています。

だから、どこにタイムアウトを入れるのがいいですか？または、より良いのは、each機能にスペースを入れる代わりに、それらをすべてビルドしてから、追加した後に100msの遅れで次々にそれらをフェードインするだけですか？

ありがとうございます！

jsFiddle：http://jsfiddle.net/danielredwood/RzkzY/16/

function imgBuilder(data){ 
    $.each(data.photos.photo,function(i,rPhoto){ 
     var base = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret, 
     thumb = base + '_m.jpg', 
     large = base + '_b.jpg', 
     imageL = '<a class="fancybox" rel="group" ' + 'title="' + rPhoto.title + '" href="'+ large +'"><img src="' + thumb + '" alt="' + rPhoto.title + '"/></a>'; 

     $(imageL).appendTo("#test").animate({opacity:1},400); 
    }); 
} 

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e3571d0891d2ad7f6b2b44611b8126ee&user_id=26545877%40N04&tags=terminal+5&per_page=25&format=json&nojsoncallback=1&auth_token=72157629563488548-bdcd1a2ad2f288df&api_sig=92b8ac2a1dac669d39aa2170ec372012", imgBuilder); 

Answer 1

$(imageL).appendTo("#test").delay(400*i).animate({opacity:1},400); 

Answer 2

代替ソリューションは、アニメーションのコールバックを使用することです：

function imgBuilder(data){ 
    $.each(data.photos.photo,function(i,rPhoto){ 
     var base = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret, 
     thumb = base + '_m.jpg', 
     large = base + '_b.jpg', 
     imageL = '<a class="fancybox" rel="group" ' + 'title="' + rPhoto.title + '" href="'+ large +'"><img src="' + thumb + '" alt="' + rPhoto.title + '"/></a>'; 

     $(imageL).appendTo("#test").hide(); 
    }); 

    callback = function() { 
     $(this).next().fadeIn(1000, callback); 
    }; 
    $('#test a:first').fadeIn(1000, callback); 
} 

私はここにフェードインを（）を使用していますよあなたが望むならanimate（）を簡単に使うことができます。そこにフィドラーズについては

：http://jsfiddle.net/luhn/hu76f/

Answer 3

またはFrame.jsのようなフロー制御ライブラリとアニメーションの同期を行います。

function imgBuilder(data){ 
    $.each(data.photos.photo,function(i,rPhoto){ 
     var base = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret, 
     thumb = base + '_m.jpg', 
     large = base + '_b.jpg', 
     imageL = '<a class="fancybox" rel="group" ' + 'title="' + rPhoto.title + '" href="'+ large +'"><img src="' + thumb + '" alt="' + rPhoto.title + '"/></a>'; 

     Frame(function(next){ 
      $(imageL).appendTo("#test").animate({opacity:1},400, next); 
     }); 

    }); 
    Frame.start(); 
} 

Answer 4

あなたは本当にこれが確実に仕事をしたい場合は、あなたがするまで待たなければなりません画像をアニメートする前に読み込まれます。

そうしないと、実際に読み込まれる前にアニメーションが開始され、ビューアはアニメーションを表示しません。残念ながら、これは少し複雑です。ここでそれを行う方法があります。画像を作成するとき、jQueryの.data()を使用して、目的のアニメーション時間であるオブジェクトに時間が設定されます。次に、onloadハンドラがトリガされると、現在の時刻が目的のアニメーション時刻と比較され、アニメーションがすぐに開始されるか、または将来の予定がスケジュールされます。また、この状態を適切にテストするには、ブラウザのメモリとディスクキャッシュをクリアする必要があるため、イメージがキャッシュされる前の初めての訪問者の検索方法を確認する必要があります。

function imgBuilder(data){ 
    var now = new Date().getTime(); 
    $.each(data.photos.photo,function(i,rPhoto){ 
     var base = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret, 
     thumb = base + '_m.jpg', 
     large = base + '_b.jpg', 
     link = '<a class="fancybox" rel="group" ' + 'title="' + rPhoto.title + '" href="'+ large +'"></a>'; 

     /** something here **/ 
     var img = new Image(); 
     img.onload = function() { 
      var this$ = $(this); 
      var animationTime = this$.data("fadeTime"); 
      var now = new Date().getTime(); 
      // if overdue for the animation, start it now 
      if (now >= animationTime) { 
       this$.fadeTo(400, 1); 
      } else { 
       // schedule it for later 
       setTimeout(function() { 
        this$.fadeTo(400, 1); 
       }, animationTime - now); 
      } 
     }; 
     img.alt = rPhoto.title; 
     var link$ = $(link); 
     link$.append(img); 
     $(img) 
      .data("fadeTime", now + (i * 400)) 
      .css("opacity", 0) 
      .attr("src", thumb); 
     link$.appendTo("#test"); 
    }); 
} 

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e3571d0891d2ad7f6b2b44611b8126ee&user_id=26545877%40N04&tags=terminal+5&per_page=25&format=json&nojsoncallback=1&auth_token=72157629563488548-bdcd1a2ad2f288df&api_sig=92b8ac2a1dac669d39aa2170ec372012", imgBuilder); 

と作業jsFiddle：http://jsfiddle.net/jfriend00/JKAQm/

これはそのためのコードです。