javascript - 如何在显示元素之前从 .load() 获取新高度

Question

我试图在使用 .show() 函数显示元素之前更改 .right-content 的高度。我希望新高度等于通过 .html() 转换的已加载 PHP 页面的高度。

在调用 .show() 函数之前，我一直无法找到获得此高度的方法，因此当页面加载时，它有时会被 chop 或变大(因为有些页面比其他页面大/小)。

有没有办法获取高度并将其更改为这段代码中注释所在的位置？谢谢!!

$(document).ready(function() { 
    jQuery.easing.def = "easeInOutBack";

    $(".right-content")
        .hide("slide")
        .load("homePage/start.php").html();
    $(".right-content")
        .show("slide", {direction: "left"}, 750);

    $('#footer')
        .fadeIn(2000);

    $(".button").click(function() {
        $(".right-content").hide("slide", {direction: "left"}, 700, function() {
            $(this).load("homePage/" + item + ".php", function() {
                // figure out how to get the new .load() height and set $(this).height() equal to it
                console.log($(this).height());
            });

            $(this).show("slide", {direction: "left"}, 1000);
        });
    });
});

Answer 1

在尝试呈现内容之前，浏览器无法明确知道内容的高度。但是 JQuery hide() 函数应用了 CSS 规则 display:none，这意味着它不会被渲染，因此此时高度是未知的。

不是hide，而是:css("visibility","hidden")。这将告诉浏览器渲染对象，但不可见。您还必须将 show 方法替换为自定义转换，以将可见性更改为 "visible"。