Question

我在尝试使fadeIn正常工作时遇到问题。站点的主要部分（可能包含图像，文本等，并且它是导航站点时唯一更改的页面;页眉和页脚是静态的）以fadeIn进入。我使用以下代码：

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("div.main").css("display", "none");
$("div.main").fadeIn(2000);
});
</script>

我也尝试了以下内容：

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("div.main").css("visibility", "visible").hide().fadeIn(2000);
});
</script>

两者的问题是，当在各个部分之间移动时，我会快速一瞥这个主要的div，然后再消失，第二次使用fadeIn。这可能是“正常”行为，我该如何解决？

我感谢任何指导。

编辑：

我确实在样式表上尝试了“display：none”属性，但是后来，我没有看到主div的内容，而是在页眉下方直到主要内容消失为止。另外，如果有的话用户已禁用javascript，他们根本看不到任何内容。我还尝试了css上的“visibility：hidden”，但是fadein就没用了。

编辑2 [求助]：

我终于将“display：none”移动到css然后，为了解决禁用的javascript困境，我按照这篇文章的建议（http://greatwebguy.com/programming/） CSS /写JavaScript的特定CSS /）。希望发布链接是可以的，万一其他人觉得它很有用。

谢谢你们的帮助：）

Answer 1

$("div.main").css("display", "none");

此功能调用仅在文档准备就绪时触发。尝试使用不带JS的CSS在呈现页面之前隐藏元素。

Answer 2

$（document）.ready（）将在DOM完全就绪时执行。这只发生在'div'已加载并因此闪烁到您的屏幕时。您可以确保初始时不会发生这种情况：

<div class="main" style="display:none">...</div>

或者只是将“display：none”添加到“.main”CSS定义中。这将在您的函数中使用fadeIn进行修改。

这是一个完整的工作副本，可以解决您的“跳跃”页脚问题：

http://jsfiddle.net/U7gfn/

<div>在fadeIn - jQuery </div>之前短暂出现

2 个答案: