Появление контента при загрузке с учетом наличия JS
 

Здравствуйте!
Хочу сделать, чтобы на главной странице основной контент плавно появлялся, для этого я использую такую конструкцию перед </body>:

$('section').css({'opacity':'0'});
$(function() {
	$('section').css({'transition':'1.5s','opacity':'1'});
});

Минус в том, что такая конструкция начинает работать после загрузки, т.е. частично элементы основного контента уже показаны на экране, остальное догружается, потом начинает работу скрипт. При вторичной загрузке страницы, все работает быстро, т.к. элементы в кэше.

Есть вариант: прописать в CSS opacity:0, а потом через JS после загрузки уже делать opacity:1. Но тут вопрос: а как быть, если у юзера отключен JS? Получается, прозрачность так и останется прозрачной, без вариантов.

На сайте www.artlebedev.ru реализовано то, что я хочу: обратите внимание на появление контента при загрузке главной страницы. Вот как у них там сделано без учета document.ready: понять не могу. Причем, если отключить JS, то контент статичен и просто стоит на месте.

Как это работает? В каком направлении реализовывать идею?

$('section').css({'opacity':'0'}); - это не будет работать, пока не будет выполнено следующее
$(function() { ...

Но ведь работает...
Как правильно сделать? Чтобы прозрачность назначалась до загрузки контента?

И еще вопрос: когда браузер понимает, что document.ready и пора бы начать выполнение скриптов?

Дмитрий94,
ну так работает почему, потому что помещено в конце документа, то есть к моменту исполнения $('section').css({'opacity':'0'}); он загружен и DOM сформирован. Но это же и определяется обработчиком $(function() ..., чего тогда $('section').css({'transition':'1.5s','opacity':'1 '}); прятать в него?

А если

$('section').css({'opacity':'0'});
$('section').css({'transition':'1.5s','opacity':'1 '});

то первое действительно в CSS.

А браузер "понимает, что document.ready и пора", потому как наступает соответствующее событие, которое и обрабатывается.