【jQuery】超簡単にページの読み込み時にフェードインで表示する方法

今回は超簡単にページの読み込み時にフェードインで表示する方法を紹介します。

フェードイン用のHTMLやCSSも不要です。全てjQueryで完結します。

 

jQuery

$('head').append(
'<style>body{display:none;}'
);
$(window).on("load", function() {
$('body').delay(600).fadeIn("slow");
});

 

たったこれだけです。

まず、最初にbodyタグにdisplay: noneを指定して全体を非表示にします。

これは、万が一ブラウザの設定でJavaScriptが無効になっていた場合に画面上に何も表示されないという状態を避けるためです。上のように指定すれば最悪JavaScriptが無効になっていてもページ自体は問題なく表示されます。

 

次のコードは読み込み時にフェードインをする処理です。

slowの部分を変更するとフェードインの速度を変更することができます。秒数で指定することもできるので、fadeIn(1000)のように書くこともできます。

delayはフェードインを何秒遅らせるかを指定します。この部分に関しては削除しても問題ありません。