jquery의 .getJSON api를 사용하여 flickr public api에서 이미지를 가져 오는 코드를 작성했습니다. 이 link을 참조하십시오. 각 요청이 완료되면 각 이미지가 슬라이드되도록했습니다. 이제 첫 번째 이미지 집합을 아래쪽으로 슬라이드 한 다음, 뒤 따르는 집합을 먼저 슬라이드 한 다음 첫 번째 이미지 집합에 사용 된 애니메이션과 동일한 애니메이션을 유지하는 Ajax 요청의 이미지로 바꿉니다. 나는 약간의 수정으로 충분하다고 생각한다. 직접 의견을 보내 주셔서 감사드립니다.아약스에 애니메이션 추가하기
답변
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);
}
}
});
}
})
}
정확하게는 아닙니다. 각 이미지의 두 번째 세트는 기존 이미지를 하나씩 대체합니다. 그래서,이 이미지를 대체하기 위해 기존 이미지 각각이 위로 슬라이드 한 다음 새로운 이미지가 그 자리에오고 그 다음 아래로 내려 가서 나머지 이미지 모두를 계속 진행합니다. – Sandeep
아 ... 알았어요. 컴퓨터에 다시 응답 할 때 이미 응답하지 않으면 살펴볼 것입니다. – john
@ insane-36 - 답변을 업데이트했으며 바이올린도 업데이트되었습니다. 나는 그것이 당신이 원하는 것이라고 생각합니다. 당신은 당신의 요구에 더 잘 맞게 딜레이와 슬라이드 업 및 다운 타임을 가지고 놀 수 있습니다. 희망이 도움이됩니다! – john
- 1. jQuery 아약스에 히스토리 추가하기
- 2. ScaleTransform WPF 애니메이션 추가하기
- 3. RaphaelJS 토글 기능에 애니메이션 추가하기
- 4. 아약스에 데이터 구조 보내기
- 5. JQuery와 $ 아약스에 statusCode 그렇지
- 6. 백본보기는 아약스에 전화
- 7. 테이블 행 추가하기 애니메이션 (JavaScript + jQuery)
- 8. splashScreen과 홈 화면 사이에 애니메이션 추가하기
- 9. jQuery UI 슬라이더에 스냅 추가하기, 애니메이션 유지하기
- 10. 아약스에 대해 이해할 수없는 코드
- 11. arraylist를 사용하여 jQuery 아약스에 패스
- 12. 아약스에 연결된 카운트 다운 함수
- 13. 아약스에 의해 호출 된 양식
- 14. 아약스에 의해로드 된 크롤링 콘텐츠
- 15. 성공 아약스에 대한 확인 대화
- 16. 아약스에 의해 호출 된 후 $() 준비 완료
- 17. 어떻게 JSON에서 PHP 변수를 포함하고 아약스에 전달
- 18. 레일 안전한 방법으로 아약스에 데이터를 제공하는 방법?
- 19. 비 JSON 아약스에 대한 콘텐츠 유형 지정
- 20. 아약스에 외부 자바 스크립트 함수를 호출하는 방법
- 21. jqModal에서 아약스에 인수를 전달할 수 있습니까?
- 22. 아약스에 의해 반환 된 파일을 렌더링하는 방법
- 23. JQuery와 아약스에 의해 테이블에서 특정 데이터를 전달
- 24. jQuery가 아약스에 의해 게시물을 얻으려면 브라우저가 충돌합니다.
- 25. 어떻게 jQuery 아약스에 UpdateTargetId를 설정할 수 있습니까?
- 26. ListView 상단에 "Loading"이미지 추가하기
- 27. 코어 애니메이션 애니메이션 추적
- 28. 왼쪽에서 오른쪽으로 애니메이션 애니메이션
- 29. 코어 애니메이션 애니메이션 지연
- 30. Silverlight에서 MapPolyLine 애니메이션 "애니메이션"
이미지를 회전하는 방법을 묻는 질문이 있으십니까? 아니면 잘못 읽었습니까? –
내가 요청한 것은 요청의 첫 번째 집합을 표시하고 다음 요청에 대해 이전 집합이 아래로 슬라이드 한 다음 새 집합이 삽입 된 것입니다. 맞습니까? – ShadowScripter