1

これらの画像を Flickr から取得して jQuery で組み立てた後、これらの画像を順番に (次々に) フェードインしようとしています。現在、コードはそれらをまとめてフェードインします。

私が理解しているようimageLに、機能のために一度に div に追加されるため、each技術的には次々とフェードインしていることがわかります。それは超高速で行われます。

では、タイムアウトを取るのに適した場所はどこでしょうか? さらに良いことに、関数にスペースを入れる代わりに、eachそれらをすべて構築し、追加後に 100 ミリ秒の遅延で次々とフェードインするにはどうすればよいでしょうか?

ありがとう！

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

</p>

4

4 に答える 4

1 
$(imageL).appendTo("#test").delay(400*i).animate({opacity:1},400);
于 2012-04-30T00:04:12.477 に答える
0

または、アニメーションを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();
}
于 2012-04-30T00:25:41.740 に答える
0

これを確実に機能させたい場合は、画像をアニメーション化する前に、画像が読み込まれるまで待つ必要があります。

そうしないと、初期のものは実際にロードされる前にアニメーションを開始し、ビューアにはアニメーションが表示されません。残念ながら、それは少し複雑です。これを行う1つの方法を次に示します。画像を作成するときに、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/。

于 2012-04-30T00:41:41.177 に答える
0

別の解決策は、animate コールバックを使用することです。

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

ここでは fadeIn() を使用していますが、必要に応じて animate() を簡単に使用することもできます。

フィドラーの場合: http://jsfiddle.net/luhn/hu76f/

于 2012-04-30T00:21:58.987 に答える