javascript - 画面の高さを変更するときのアニメーション機能

Question

jQueryがAJAXを介して新しいページのコンテンツを収集するときに、フッターを画面にアタッチ/デタッチできるようにする関数を作成しました。次に、これを右からスワイプすると、背景はウィンドウに対して100％の高さと幅になります。唯一のことは、この関数が呼び出されると、新しいコンテンツに応じて適切なサイズにジャンプし（高さを取得）、ジャンプするのではなく、これをアニメーション化するのが素晴らしいことです。

アニメーションが必要なときに呼び出すことができる2番目の関数を作成しようとしましたが、正しく機能しません。これを行う方法はありますか、それともこれは完全に不可能ですか？もしそうなら、私はこれまでどのくらいうまくやっていますか？任意の提案をいただければ幸いです。

現在の「ジャンピー」関数：

function resize() {

    //content_height has been changed to $("#content").height();
    //to collect the new content height
    if($(window).height() < $("#content").height()+291) {
        $(".full").css("height", $(".full").height()+19 + "px");
        $("#footer-wrapper").css({
            bottom: "auto",
            top: ($("#content").height()+147) + "px"
        });
        $(".bg").css("height", ($("#content").height()+272) + "px");
    } else {
        $(".full").css("height", $(window).height()-274 + "px");
        $("#footer-wrapper").css({ bottom: 0, top: "auto" });
        $(".bg").css("height", "100%");
    }
}

アニメーション機能：

function animateResize() {
    if($(window).height() < $("#content").height()+291) {
        $(".full").animate({ height: full_height+19 + "px" });
        $("#footer-wrapper").animate({
           bottom: "auto",
           top: ($("#content").height()+166) + "px"
        });
        $(".bg").animate({ height: ($("#content").height()+291) + "px" });
    } else {
        $(".full").animate({ height: $(window).height()-274 + "px" });
        $("#footer-wrapper").animate({ bottom: 0, top: "auto" });
        $(".bg").animate({ height: "100%" });
    }
}

参考までに、追加されるピクセルはヘッダーやフッターの高さです。