javascript - 单击时执行一些操作，然后加载页面

Question

我正在寻找执行以下操作的脚本：

我有一个高度为 200 像素的横幅，在该横幅下方我有几个链接。当我单击其中一个链接时（假设使用 class="link-one"），然后首先让横幅动画到 0px 高度，然后 ajax 加载横幅高度为 0 的新页面，然后动画到 200px 高度。

也许使用 ajax 有点难，我可以把那部分排除在外，所以在加载新页面之前做动画，在加载新页面时做动画。

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