我试图在使用 .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);
});
});
});
最佳答案
在尝试呈现内容之前,浏览器无法明确知道内容的高度。但是 JQuery hide()
函数应用了 CSS 规则 display:none
,这意味着它不会被渲染,因此此时高度是未知的。
不是hide
,而是:css("visibility","hidden")
。这将告诉浏览器渲染对象,但不可见。您还必须将 show
方法替换为自定义转换,以将可见性更改为 "visible"
。
关于javascript - 如何在显示元素之前从 .load() 获取新高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30585885/