ajax를 사용하여 jquery를 사용하여 이미지를 페이드하는 방법

Question

API에서 이미지 (30 개)를 요청하고 DOM에 각각로드하는 대신 JQuery의 fadeIn()을 사용하여 우아하게 페이드하게 만듭니다. 이미지를 볼 수 있습니다. 그것을 작동시킬 수 없습니다.

load() (또는 live())를 사용해야합니까? 아래의 코드는 API에서 이미지를 가져 와서 새로운 div에 넣은 다음 #wrapper에 추가합니다. 문제는 그것이 위에서 언급 한 것처럼 각각을 희미하게하고 싶지만 모든 것을 덤프하는 것입니다.

success: function(result) { 
    for (var i = 0, l = 30; i < l; i++) { 
     var media = result.data[i]; 
     var imageString = //bits for inside the div; 
     var newdiv = document.createElement('div'); 
     newdiv.className = "imageHolder"; 
     newdiv.innerHTML = imageString; 

     $('#wrapper').append(newdiv); 
    } 
}  
$('img').load(function() { 
$('.imageHolder').fadeIn(); 
});  

나는 단순 할 것이라고 확신하지만, 그걸 해독 할 수는 없습니다.

편집 : 아래가 효과가 있다고 생각됩니다. 기쁨이 없습니다. 나는, 이미지, 아니면 그냥 이미지 자체 포함 된 div에서 페이드 중 하나 행복 해요 너무 오래 작은 빨판이 페이드로 ... 나는이 라인을 따라 뭔가를 시도 할 것입니다 지금까지

success: function(result) { 
     for (var i = 0, l = 30; i < l; i++) { 
      var media = result.data[i]; 
      var imageString = '<a href="#" onClick="getBigOne(\'' + media.id + '\')"><img class="inst" src="' + media.images.thumbnail.url + '"></a>'; 
      $('<div class="imageHolder">') 
       .append(imageString) 
       .prependTo('#wrapper') 
       .load(function() { 
        $(this).fadeIn(); 
       }) 
     } 

Answer 1

을 제안 감사합니다 (잘 모르겠어요하지만 이들이 사이트에 표시되는 방식으로 작동합니다) :

function fadeImagesIn(i) { 
    $('#wrapper .imageHolder').eq(i).fadeIn(600,function() { 
               fadeImagesIn(i+1); 
              }); 
} 

//ajax here 
success: function(result) { 
    for (var i = 0, l = 30; i < l; i++) { 
     var media = result.data[i]; 
     var imageString = //bits for inside the div; 
     var newdiv = document.createElement('div'); 
     newdiv.className = "imageHolder"; 
     newdiv.innerHTML = imageString; 

     $('#wrapper').append(newdiv); 
    } 
    fadeImagesIn(0); 
} 

참고 : 이 같은 검증되지 않은

Answer 2

뭔가가 사라질 수있는 모든 일을 약간의 지연과 함께 하나 하나에 전자 이미지 :

success: function(response) 
{ 
    var imgs = $(response.data.join('')).hide(); 
    $('<div class="imageHolder">') 
     .appendTo('#wrapper') 
     .append(imgs) 
     .children('img') 
     .each(function(i) { 
      $(this).delay((i + 1) * 100).fadeIn(); 
     }); 
} 

그냥 imageHolder이 페이드 시도하려는 경우 :

success: function(response) 
{ 
    var imgs = $(response.data.join('')).hide(); 
    $('<div class="imageHolder">') 
     .append(imgs) 
     .appendTo('#wrapper') 
     .fadeIn(); 
} 

바이올린 :http://jsfiddle.net/garreh/hrBzy/1/

Answer 3

이 디스플레이를 지정합니다 귀하의 CSS에 imageHolder에 아무 것도. append 명령에는 이미지가 표시되지 않습니다. 그런 다음 $ (". imageHolder"). fadeIn()을 사용하여 모양을 제어하십시오.