无法在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

我不知道我很理解你的问题，但如果你想在包含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); 
    }); 

}); 

Answer 2

这是一个类似的问题，关于淡入淡入的一些输入元素。 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());​