jQuery가 순차적으로 이미지를 희미하게합니다. JSON을 잡아

Question

번 이미지를 순차적으로 (하나씩 차례대로) 사라지게하려고 시도한 후 Flickr에서 이미지를 가져 와서 jQuery로 어셈블합니다. 현재이 코드는 모두 함께 사라집니다.

내가 이해하는 것처럼 each 함수 때문에 한 번에 한 div에 imageL이 추가되었으므로 기술적으로 그 둘은 한꺼번에 사라지는 것을 볼 수 있습니다.

그렇다면 시간을 낼 수있는 좋은 곳은 어디입니까? 또는 더 나은 점은, each 함수에 공간을 두는 대신에, 어떻게 그것들을 모두 빌드 할 수 있고, 추가 한 후에 100ms의 지연으로 하나씩 사라지게 할 수 있을까요?

감사합니다.

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); 

Answer 1

$(imageL).appendTo("#test").delay(400*i).animate({opacity:1},400); 

Answer 2

또 다른 해결책은 애니메이션 콜백 사용하는 것입니다 : 여기)

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/

Answer 3

또는 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(); 
} 

Answer 4

을, 당신은 때까지 기다릴 필요가 당신의 이미지를 애니메이션화하기 전에 이미지가로드됩니다.

그렇지 않으면 초기 애니메이션이 실제로로드되기 전에 애니메이션이 시작되어 뷰어에서 애니메이션을 볼 수 없습니다. 불행히도, 그것은 약간 복잡합니다. 여기에 한 가지 방법이 있습니다. 이미지를 만들 때 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/

이

는 코드입니다.