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

另一种解决方案是使用动画回调：

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 回答
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

如果你真的想让它可靠地工作，你必须等到你的图像被加载后再尝试为它们设置动画。

否则，早期的将在实际加载之前开始制作动画，观众将看不到动画。不幸的是，这有点复杂。这是一种方法。创建图像时，使用 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 回答