Question

尝试在从Flickr抓取并由jQuery组装后依次逐个淡化这些图像（一个接一个）。目前，代码将它们全部淡化。

根据我的理解，由于imageL功能，each一次被附加到div一个，所以我看到的是技术上它们一个接一个地消失，它只是做得超级快。

那么在哪里放假的好地方？或者更好的是，不是在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

另一种解决方案是使用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/

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/。

jQuery抓取后，jQuery按顺序淡化图像

4 个答案: