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"와 사업부 내에 포함 된 이미지의 무리에 페이드하려는 경우, 당신은 아마 뭔가를 할 수 이 :

//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());​