On click do some action and then load page

Question

I'm looking for a script which does the following:

I have a banner with height 200px, below that banner I have a couple of links. When I click on one of the link (let say with class="link-one") then first let the banner animate to 0px height, then ajax load the new page with banner height 0 and then animate to 200px height.

Maybe it's a bit hard to use ajax and I can keep that part out, so befor loading the new page do the animation and when loaded the new page do the animation.

Answer 1

//example from flicker, can be any ajax call
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

$("#banner").click(function() {
    $(this).animate({height:"toggle"},5000,function() { //height:toggle changes the height to 0, the bak to the original height

        $.getJSON( flickerAPI, {
        tags: "mount rainier",
        tagmode: "any",
        format: "json"
        }).done(function( data ) {
            $("#banner").animate({height:"toggle"},5000,function() {
                alert("done")        
            });
         });
    });
});