[JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する
スポンサード
スポンサード
サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。
jQuery の fadeIn()
を使うだけの簡単な処理ですし、フェードインの微調整(時間調整)次第で効果的な演出も可能になるかと思います。
目次
fadeIn() でページ読込み時にフェードイン
Javascrit の記述
<head> 内に jquery ファイルと一緒に以下のような記述を追加します。1 2 3 4 5 6 | <script src="./jquery.min.js"></script> <script> $(document).ready(function() { $('body').fadeIn(2000); }); </script> |
ページ全体がフェードイン表示されるよう、今回は body を対象にしています。
fadeIn()
には「slow」「normal」「fast」 の値を指定することができますし、上記例の fadeIn(2000)
のように数値(ミリ秒)を入れることもできますので、ここはサイトに合わせて調整してみてください。
※2000ms = 2秒 でフェードインします。
CSS の記述
CSS で body にdisplay:none
を与えて全体を非表示にしておきます。1 2 3 | body { display:none } |
↓デモはこんな感じです。
jQuuery の fadeIn() を使ったフェードイン表示のデモ
特定の要素をフェードイン
今回はページ全体をフェードンで表示させましたが、body ではなく特定の要素を対象にすることも可能です。1 2 3 4 5 6 | <script src="./jquery.min.js"></script> <script> $(document).ready(function() { $('対象となる要素').fadeIn(2000); }); </script> |
スポンサード
はじめまして!
うまくいかないので質問させてもらいます!
上記のプログラムを入力したのですが、なかなかうまくいきません;
どこか間違っていたら教えてほしいです!
ソースは↓です。
あと背景はCSSでやっています。
YuFrPro
$(‘document’).ready(function() {
$(‘body’).fadeIn(2000);
});
alert(‘ようこそ!\nYuFrProへ!’);
はじめまして、お問い合わせ有り難うございます。
WEBアンテナの管理者です。
すでに対応いただいたモノも含まれるかもしれませんが、
いただいたソースだけで判断しますと、
・$(‘document’) は $(document) のように引用符なし。
・jquery.min.js ファイルの読み込みが行われているかどうか
・CSSでbody を display:none にしてあげる。
でいかがでしょうか。