jquery - 不能在 jQuery 中使用淡入淡出和循环

Question

我正在尝试使用 jQuery 一个接一个地加载图像并淡入淡出。问题是它只加载一张图片。我该如何解决这个问题？

$('input[id*="friend_bar"]').click(function () {
    FB.ui({
        method: 'apprequests',
        message: 'Try this awesome application?',
        exclude_ids: '<?php echo $exclude_ids ?>'
    }, function (response) {
        if (response) {
            $.post('invite_suck.php', {
                'response': response.to
            }, function (data) {
                for (var index in response.to) {
                    var ID = response.to[index];
                    $("#friend_bar").first().fadeOut(function () {
                        $(this).load(function () {
                            $(this).fadeIn();
                        });
                        $(this).replaceWith('<div align=\"center\"> <input type=\"image\" src=\"https://graph.facebook.com/' + ID + '/picture/?type=square\" height=\"50\" width=\"50\" align=\"center\">').attr("id", "friend");
                    });
                }
            });
        } 
        else {
            alert('Request was not sent');
        }
    });

Answer 1

This is a similar question with regards to fading in some input elements. jQuery fadein in a particular order

http://jsfiddle.net/lucuma/CVMSx/1/

function fadeChain(elem) {
    if(elem) {
        $(elem).fadeIn('slow', function() {
            fadeChain($(this).next());
        });
    }
}

fadeChain($('#slideshow img').first());​

Answer 2

我不确定我是否完全理解你的问题，但如果你试图淡入包含在 id 为“friend_bar”的 div 中的一堆图像，你可能会做这样的事情：

//set images opacity at 0
 $('#friend_bar > img').css('opacity', '0');
    //self-invoking function to fade in each image in succession 
 $(function fader() {
     var $image = $('#friend_bar > img');

    $image.each(function(index, item) {
         setTimeout(function() {
             $(item).animate({opacity:1}, 500);
         }, index*500);
     });

 });