Функция JQuery в чистом JavaScript

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 показать everthing (тело) с анимацией затухания (с jQuery - как загружено в этом состоянии)

Любая помощь высоко ценится.

Пит

Answer 1

Я не совсем понимаю, в чем ваш вопрос, но если я на правильном пути, вам не нужна часть .css('display', 'block') для анимации.Избавьтесь от этого, так что это просто $('body').fadeIn(3000); и анимация должна работать нормально.

Answer 2

Эквивалент

$('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>

в head после других стилей CSS.

Обновление 2

Кажется, что установка свойства CSS напрямую вызывает проблемы в некоторых браузерах. Но использование $('body').hide() похоже работает: http://jsfiddle.net/fkling/JaLZU/