ページ読み込み時にふわっと表示させるjQueryコード

この記事は2014年9月15日に書かれたもので、内容が古い可能性がありますのでご注意ください。

ページ読み込み時に「ふわっと」表示されるサイトをよく見かけます。
この動きがあるとサイトの質がワンランク上がりますよね。

短いソースで実装可能ですので、ぜひ試してみてください。

HTMLは気にすることなく進めてしまって問題ないです。

そしてjQueryの記述ですが、
まずjQuery本体の記述の後に下記ソースを追加します。

$('head').append(
	'<style type="text/css">body {display:none;}</style>'
);
$(window).load(function() {
	$('body').fadeIn("slow");
});

ソースの内容

$(‘head’).append(★); … head要素の末尾に内包されているコード(★)を追加。
body {display:none;} … body要素を非表示にするCSS。

$(window).load(function() {★}); … 画面読み込みが完了したら内包されているコード(★)を実行。
$(‘body’).fadeIn(“slow”); … body全体をゆっくりフェードインさせる。

ふわっと表示させるにはfadeIn(speed)というコードを利用するのが便利です。
逆にふわっと非表示にさせることも可能です。その場合はfadeOut(speed)を利用します。
こちらのサイトに詳細が記載されています。
jQuery 日本語リファレンス

宜しければご参考にどうぞ。