Question

我正在开发一个非常简单的单页网站：http://dispose.co/dormstory/pod.html

正如您所看到的，我已经完全定位了内容，当您点击链接时，前一内容会淡出，新内容会淡入。唯一的问题是包含div的大小会保留在页面上，所以当你从船员过渡到预告片例如时，页面仍然是1000 + px长，因为船员页面很长......

解决此问题的简单方法是什么？我认为这与将某个高度设置为自动有关，但这根本没有帮助。

也许我需要在fadeIn和fadeOut之间重新加载页面？

感谢您的帮助！

Answer 1

作为一种简单的方法，您可以尝试在点击其中一个链接时强制高度。

一种方法是将高度放在数据属性中：

<a href="#" data-main-height="750px">trailer</a>

然后点击，抓住该值：

var the_height = $(this).data("main-height");

然后通过jquery设置它：

$("#contentarea").css("height", the_height);

如果您的网页使用了插件，则很可能会在转换之前使用回调。

我建议尝试打开后退按钮功能。

-p

Answer 2

是否有理由将table td用于布局，而不是浮动div？

我相信它是因为table及其原生风格，所以我建议你尝试将你的布局改为：

<div>
    <div id="gutter">
        <!-- Content here -->
    </div>
    <div id="middle">
        <!-- Content here -->
    </div>
    <div id="indiegogo">
        <!-- Content here -->
    </div>
</div>

jQuery简单的过渡问题

2 个答案: