- 締切済み
jQueryを使用してページ全体をフェードさせたい
タイトルの通りjQueryを使用してページ全体をフェードさせたいのですが、うまくいきません。 そこで皆様にお力を貸していただこうと思い質問しました。 イメージとしては以下のURLのような感じで、ホームページ内のリンクを行き来する度にリンク先ページをフェードインさせて表示したいのです。 http://blog-imgs-32-origin.fc2.com/m/y/s/myspacekaizou/jqueryfadingdemo.html 一応、http://yukinolab.blog.fc2.com/blog-entry-25.htmlとhttp://tech-objects.blogspot.jp/2011/07/jquery_04.htmlを参考にしてレイアウトをしたのですが、 #wrap { display: none; } を入力した段階でプレビューすると何も表示されなくなってしまいます。 #wrap { display: none; } を抜きでプレビューすると表示はされるのですが、リンクを飛んでみてもフェードインせずに普通にリンク先に飛ぶだけです。 何がいけないのでしょうか？ ご教授のほどよろしくお願いします。
- shin_skram
- お礼率0% (0/3)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
#1 naokitaです（お礼拝見済み） うーん、意味が通じなかったかな？ 間違ってたり、余計な事しているけど・・・ ここに回答してもURLが消えるので、 参照されたサイト http://blog-imgs-32-origin.fc2.com/m/y/s/myspacekaizou/jqueryfadingdemo.html これを表示して、右クリックから「ソースを表示」 それが回答であるから、自分流に確認しながら編集すればよいです。
- naokita
- ベストアンサー率57% (1008/1745)
#1です。 追記 ここの回答欄では、URL部分が長いと消えるから 自分で参照したサイトの jQuery本体 <script～～～～ を充てること。
補足
失礼いたしました。 参照URLのコードを貼ります。 以下の要素を組み合わせるとどういったソースになればきちんと表示されるのでしょうか？ jQuery本体 head内に <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var i = 0; var int = 0; $(window).bind("load", function() { $('#wrap').fadeIn(100); // フェードインの実行 var int=setInterval("sFade(i)",100); // ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } i++; } </script> HTML bodyタグ直前直後 <body> <div id="wrap"> ...中略... </div><!-- /wrap --> </body> CSS #wrap { display: none; } 別の部分で既にbodyに<div>を使っているので、 <script type="text/javascript"> $(function () { $("#label, #item").warapAll("<div id="wrap"></div>"); }); </script> <div id="menu"></div> <div id="main"></div> </script> を使用しています。 なので実際にはbodyは以下のようになっています。 <div id="wrap"> <div id="menu"></div> <div id="main"></div> </div>
- naokita
- ベストアンサー率57% (1008/1745)
<style type="text/css"> #wrap {display: none;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var i = 0; var int = 0; $(window).bind("load", function() { $('#wrap').fadeIn(2000); var int=setInterval("sFade(i)",100); }); function sFade() { if (i >= 1) { clearInterval(int); } i++; } </script> <div id="wrap"> <h1>jQuery Fade Load</h1> <p>書いてる通りだと思うけど・・・<br /> 今のソースは捨てて、ゼロからテストファイルを作りましょう。</p> </div>
補足
仰るとおりに最初から作成してみましたが、うまくいきませんでした・・・。 KompoZerで作成し、Firefoxで見ると jQuery Fade Load 書いてる通りだと思うけど・・・ 今のソースは捨てて、ゼロからテストファイルを作りましょう。 が縦に二個並んでる状態になっています。 KompoZer内のプレビューで見ると、通常通り表示されます。 しかしどちらもフェード表示はされていません。 何がいけないのでしょうか・・・？ 下がそのソースになります。 <html lang="ja"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <style type="text/css"> #wrap {display: none;} </style> <script type="text/javascript"> var i = 0; var int = 0; $(window).bind("load", function() { $('#wrap').fadeIn(2000); var int=setInterval("sFade(i)",5000); }); function sFade() { if (i >= 1) { clearInterval(int); } i++; } </script> <div id="wrap"> <h1>jQuery Fade Load</h1> <p>書いてる通りだと思うけど・・・<br> 今のソースは捨てて、ゼロからテストファイルを作りましょう。</p> </div> </head> <body leftmargin="20" topmargin="30" rightmargin="20"> <div id="wrap"> <h1>jQuery Fade Load</h1> <p>書いてる通りだと思うけど・・・<br> 今のソースは捨てて、ゼロからテストファイルを作りましょう。</p> </div> </body> </html>
補足
ありがとうございます！！ フェードイン表示させることができました！！ 今度は別の問題が浮上しました。 上部にメニューがあるレイアウトにしているのですが、メニューとjQuery innerfadeとの間に余白ができてしまいます。 余白はメニューの下、jQuery innerfadeで表示させる画像の上です。 この余白はどうやって消すのでしょうか？