2011-12-28 4 views
-1

jquery의 .getJSON api를 사용하여 flickr public api에서 이미지를 가져 오는 코드를 작성했습니다. 이 link을 참조하십시오. 각 요청이 완료되면 각 이미지가 슬라이드되도록했습니다. 이제 첫 번째 이미지 집합을 아래쪽으로 슬라이드 한 다음, 뒤 따르는 집합을 먼저 슬라이드 한 다음 첫 번째 이미지 집합에 사용 된 애니메이션과 동일한 애니메이션을 유지하는 Ajax 요청의 이미지로 바꿉니다. 나는 약간의 수정으로 충분하다고 생각한다. 직접 의견을 보내 주셔서 감사드립니다.아약스에 애니메이션 추가하기

+0

이미지를 회전하는 방법을 묻는 질문이 있으십니까? 아니면 잘못 읽었습니까? –

+0

내가 요청한 것은 요청의 첫 번째 집합을 표시하고 다음 요청에 대해 이전 집합이 아래로 슬라이드 한 다음 새 집합이 삽입 된 것입니다. 맞습니까? – ShadowScripter

답변

1

this 염두에 두었던 것이 있습니까?

getFlickr(); 
setInterval(getFlickr, 20000); 

function getFlickr() { 
    $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', { 
     'format': 'json' 
    }, function(data) { 
     if ($('p').length < 1) { 
      addPiecePiece('#main',true,null); 
     } 
     else { 
      $('.flickr').each(function(i) { 
       $(this).delay(4000*i).slideUp(2000,function(){ 
         addPiecePiece($(this),false,i); 
         $(this).remove(); 
       }); 
      }); 


     } 

     function addPiecePiece(element,aoa,index) { 
      $.each(data.items, function(key, value) { 
       if(index == null || index == key){ 
        title = value.title; 
        description = value.description; 
        photo = value.media.m; 
        html = $('<p class="flickr"></p>').html(description).css({ 
         'display': 'none' 
        }); 

        if(aoa == true){ 
        $(html).appendTo(element).slideDown(2000); 
        }else{ 
        $(html).insertAfter(element).slideDown(2000); 
        } 
       } 

      }); 
     } 

    }) 
} 
+1

정확하게는 아닙니다. 각 이미지의 두 번째 세트는 기존 이미지를 하나씩 대체합니다. 그래서,이 이미지를 대체하기 위해 기존 이미지 각각이 위로 슬라이드 한 다음 새로운 이미지가 그 자리에오고 그 다음 아래로 내려 가서 나머지 이미지 모두를 계속 진행합니다. – Sandeep

+0

아 ... 알았어요. 컴퓨터에 다시 응답 할 때 이미 응답하지 않으면 살펴볼 것입니다. – john

+0

@ insane-36 - 답변을 업데이트했으며 바이올린도 업데이트되었습니다. 나는 그것이 당신이 원하는 것이라고 생각합니다. 당신은 당신의 요구에 더 잘 맞게 딜레이와 슬라이드 업 및 다운 타임을 가지고 놀 수 있습니다. 희망이 도움이됩니다! – john

관련 문제