Question

我创建了一个函数，当jQuery通过AJAX收集新页面内容时，允许页脚附加/分离到屏幕。然后从右侧滑入，背景是窗口的100％高度和宽度。唯一的一点是，当调用这个函数时，它会根据新内容（获得它的高度）跳转到正确的大小，并且让这个动画而不是跳跃是很好的。

我已经开始创建第二个函数，当我需要它动画但它无法正常工作时可以调用它。有办法做到这一点还是完全不可能？如果是这样，到目前为止我做得怎么样？任何建议都将不胜感激。

当前'跳跃'功能：

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

仅供参考，添加的像素是页眉和/或页脚的高度。

更改屏幕高度时的动画功能

0 个答案: