- 締切済み
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>
関連するQ&A
- ｊQueryでの画像のフェードインのループ
ｊQuery初心者です。 jQueryで３枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 下記だと何故２週目の２枚目で止まるのか？の原因と、スマートな書き方をご教授頂けませんか？ <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>
- ベストアンサー
- JavaScript
- jQueryのフェードイン・アウト効果について
いつもお世話になります。 jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。 以下がソースです。 <!-- html --> <div id="wrapper"> <ul id="tabMenu"> <li class="tab_a"><img src="tab1.png"/ ></li> <li class="tab_b"><img src="tab2_2.png" /></li> <li class="tab_c"><img src="tab3_2.png" /></li> </ul> <div id="tab_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> </div> <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ jQuery("#tab_a").css("display", "block"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_bボタンをクリックした時の処理 jQuery(".tab_b").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "block"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_cボタンをクリックした時の処理 jQuery(".tab_c").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "block"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); }); 上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。 やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで、画像クリック→フェードイン
初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。 かなりの初心者なのです。 今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。 これは何故なのでしょうか・・・。 スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){ $("#mainimg img").attr("src","img/topimg1.jpg"); $("#mainimg p:not(:animated)").fadeIn("slow"); }) ・・・・ 小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素（大きい画像が表示されるところ）の前に、id名にfadeInと入れた部分のpです。 スクリプトに何か問題があるのかどうかもわかりません。 しかしブラウザで作動しないのはおかしいですよね。 どなたか分かる方がいれば教えてくださると嬉しいです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- jQuery を使って下記のようなことは可能でしょうか。また可能な場合
jQuery を使って下記のようなことは可能でしょうか。また可能な場合参考になるテンプレートのようなものがある場所を教えていただけますと幸いです。 http://www.nittsu.co.jp/index.html のサイトのグローバルメニュー下のFlashコンテンツ。 やりたいことは、 同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。 また、右側のボタンをクリックするとリンクされているページに飛ぶ形。 表示されるイメージは、フェードインなどのように動的に表示される必要はなく、単純に静的なイメージが切り替わる感じです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- background をフェードしながら変える方法
ボタン対応での background をフェードしながら変える方法を知りたいです 必要事項はこちら： - ボタンは同ページ内に複数（button1, button2 & button3) - それらのボタンを押すと background が変わる (button1 を押すと background1, button2 を押すと background2 に背景が変わる） - 変わるときにフェードイン・アウトエフェクトが必要 (jQuery） どなたかご存知でしたら是非教えてください！
- ベストアンサー
- AJAX
- jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り
jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り替えるスクリプトについてご質問です。 http://medienfreunde.com/lab/innerfade/ html のロード時に数枚の切り替え予定の画像がスクリプトが 読み込まれる前に全部表示されてしまって格好が悪いので、 表示させないようにする為には、どうすればよろしいでしょうか？ 特に上記のスクリプトを用いなくても代替えのスクリプトがあれば、そちらでも構いません。
- ベストアンサー
- JavaScript
- jQueryでfadeInのタイミング（Speed
jQueryを勉強中で、こちらのページにある、 時間差で要素がフェードインするスプリクトを 参考にさせていただいています。 http://y-growth.com/blog/archives/281.html サンプルでは、 $("#fade li:nth-child(1)").fadeIn("5000",function() { $("#fade li:nth-child(2)").fadeIn("5000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ となっていて、等間隔でフェードインさせています。 このフェードの間隔を調整したいのですが、 $("#fade li:nth-child(1)").fadeIn("50000",function() { $("#fade li:nth-child(2)").fadeIn("10000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ このようにSpeedの値を変更しても、 等間隔でフェードインしてしまいます。 また、このような指定でも、同時にフェードインしてしまいます。 $("#fade li:nth-child(1)").fadeIn("50000"); $("#fade li:nth-child(2)").fadeIn("10000"); 何か見落としがあるのでしょうか？ どなたか、どうぞよろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- 複雑なjQuery
このサイトはjQueryを使用していると思いますが、色々な要素が入ってます。 どのようなサンプルを使用しているのか分かる方教えてください。 １．ロゴがばらばらにフェードインします。 ２．下から上にページがスクロール（最初はスピードが速くて、最後は遅くスクロール）して トップページが表示されます。 ３．ロールオーバー（回転）でメニューボタンが変化してます。 ４．背景が何層かになっています。 ５．ビデオの埋め込み jQueryは初めてなので初心者です。 このサイトはとてもカッコいいです。 このようなサンプルデータが書かれている参考サイトを教えてください。 サンプルデータをダウンロードしたいです。 クリスチャン ダダのサイト http://www.christiandada.jp/
- ベストアンサー
- その他([技術者向] コンピューター)
- jqueryでajaxな読み込み+切り替え
現在jqueryで任意のディレクトリ内のファイルを読み込んで表示、 さらに[NEXT]、[PREV]で読み込むファイルを切り替えるようにしたいと考えています。 ロード先のディレクトリのファイル名は年＋月などの規則性を用いて（201103.html、201102.html...）付けていきます。 【html】 <body> コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ <div id="loadContents"> ここに「/hoge/foo.html」を読み込み&切り替え </div> <a href="#" id="btnPrev">PREV/a> <a href="#" id="btnNext">NEXT</a> コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ </body> ■欲しい機能 ・最初に読み込まれるのは現在の月のファイル ・端のファイル（[NEXT]、[PREV]がそれ以上ない場合）には<a>タグを削除、 もしくは「display: none」を付けるなどして非表示に ■できれば欲しい機能 ・切替時にフェードイン&フェードアウト等のアニメーションの設定オプション 以上になります。 難しいようでしたら、[NEXT]、[PREV]のリンクは 前後のリンク先をぞれぞれのリンク先に設定して 読み込まれるコンテンツのなかに入れてしまってもありかなと思っています。 【例：201103.htmlの場合のリンク】 <a href="/hoge/201102.html" id="btnPrev">PREV/a> <a href="/hoge/201104.html" id="btnNext">NEXT</a> まだまだ未熟でどうしらた実装できるかの引っかかりさえ見えない状況です。 ご教授ください。 どうぞ宜しく御願い致します。
- ベストアンサー
- JavaScript
補足
ありがとうございます！！ フェードイン表示させることができました！！ 今度は別の問題が浮上しました。 上部にメニューがあるレイアウトにしているのですが、メニューとjQuery innerfadeとの間に余白ができてしまいます。 余白はメニューの下、jQuery innerfadeで表示させる画像の上です。 この余白はどうやって消すのでしょうか？