Question

I wrote code in which .getJSON api from jquery is used to fetch images from flickr public api. Please see this link. I have made each of the images to slide after each request gets finished. Now, I want the first set of image to slide downward and then following sets to slide up first and then replaced by images from ajax request maintaining the same animation as used for the first set of images. I think a very little modification is enough. I thank you for your comment and suggestion before hand.

Answer 1

Is this what you had in mind?

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

            });
        }

    })
}