纯javascript中的jQuery函数

Question

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

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

所以在jQuery中它会是

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

纯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); 

？

我问，因为我假设你已经得到了只使用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); 并且动画应该可以正常工作。