純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); 並且動畫應該可以正常工作。