纯javascript中的jQuery函数

Question

我是那些从不费心学习JavaScript并直接使用jQuery的人之一。

我正在编写简单的脚本来隐藏所有内容，直到页面完全加载 - 并且因为我的jQuery是在html / css / images之后加载的，所以我计划将小脚本放在标题中。

所以在jQuery中它将是

$('body').css('display','none');

Pure JavaScript：

document.body.parentNode.style.display = 'none';

但是：

$(window).load(function() { $('body').css('display', 'block').fadeIn(3000); });

有动画吗？为什么呢？

我正在尝试做什么：

• ＃1用javascipt隐藏所有内容（正文）直到所有内容都被加载（在这个状态下没有jQuery，因为最后加载了）
• ＃2显示带有fadding动画的everthing（body）（使用jQuery - 在此状态下加载）

任何帮助非常感谢。

皮特

Answer 1

相当于

$('body').css('display','none');

是

document.body.style.display = 'none';

$('body')选择body元素，但document.body.parentNode显然会选择body的父级。

而且不应该只是

$('body').fadeIn(3000);

<？/ s的>

我问，因为我假设你已经让代码只使用jQuery。但显然你没有，所以再次，它必须只是$('body').fadeIn(3000);，否则你立即使元素可见，并且没有什么可以动画了。

观看演示：http://jsfiddle.net/fkling/Q24pC/1/

<强>更新

$(window).load仅在加载所有资源时触发。如果你有图像，这可能需要更长的时间。要提前隐藏元素，您应该收听ready事件：

$(document).ready(function() {
    // still don't know why you don't want to use jQuery.
    document.body.style.display = 'none';
});

或最初使用CSS隐藏元素

body {
    display: none;
}

要确保已禁用JavaScript的用户可以看到该页面，您必须添加

<noscript>
    <style>
        body {
            display: block;
        }
    </style>
</noscript>

在其他CSS样式之后的head中

。

更新2

似乎直接设置CSS属性会导致某些浏览器出现问题。但使用$('body').hide()似乎有效：http://jsfiddle.net/fkling/JaLZU/

Answer 2

我不清楚你的问题究竟是什么，但是如果我走在正确的轨道上你就不需要动画的.css('display', 'block')部分了。摆脱它，所以它只是$('body').fadeIn(3000);，动画应该可以正常工作。