2011-12-28 5 views
-1

にアニメーションを追加します。このlinkをご覧ください。各リクエストが完了した後、それぞれのイメージをスライドさせました。今、私は、画像の第一のセットのために使用したのと同じアニメーションを維持するAJAX要求からの画像に置き換え、その後最初にスライドさせて下方へスライドする画像の最初のセットを必要とし、次のセット。私は少しの変更で十分だと思う。私はあなたのコメントと提案を手にしていただきありがとうございます。私はjqueryのから.getJSON APIはFlickrのパブリックAPIから画像を取得するために使用されるコードを書いた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

正確ではありません。第2の組の画像のそれぞれは、既存の画像を1つずつ置き換える。だから、この画像を置き換えるために、既存のもののそれぞれは、最大スライドし、新しいイメージがその場所に到達した滑り落ち、それは残りのすべての画像のために行きます。 – Sandeep

+0

ああ...それを得ました。私はコンピュータに戻ったときにそれがまだ答えられていないかどうかを見ていきます。 – john

+0

@非常識-36 - 私は答えを更新した、フィドルも同様に更新されます。私はそれがあなたが望んだものだと思います。あなたは、あなたのニーズに合わせて、遅延やスライドアップ、ダウンタイムを使ってプレイすることができます。それが役に立てば幸い! – john

関連する問題