- ベストアンサー
background をフェードしながら変える方法
ボタン対応での background をフェードしながら変える方法を知りたいです 必要事項はこちら： - ボタンは同ページ内に複数（button1, button2 & button3) - それらのボタンを押すと background が変わる (button1 を押すと background1, button2 を押すと background2 に背景が変わる） - 変わるときにフェードイン・アウトエフェクトが必要 (jQuery） どなたかご存知でしたら是非教えてください！
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞必要事項が全て含まれているチュートリアルやサンプルサイトをご存知でしたら どこまで何をご存知かわかりませんが（私もたいして知らないけど）、#1で紹介したjqueryのdocumentationにjquery関連は全て含まれていると思います。でも、その前にjavascriptをある程度理解しないと… さらにその前に、HTMLとCSSを… となってしまうので、必要そうな情報をぐぐってみてください。 （私も、webだけで覚えました → だからよくわかってない… ??） どのようなソースで、どのような実装をしたいのかまったくわかりませんので、ごく簡単な原理のみのサンプルを… bg_layerが擬似背景のdivで、このdivの背景を対象の背景と仮定しています。 実際のコンテンツを背景の前に表示するために、contentはposition:absoluteで表示させています。（ｚ-indexでもよいかも） wrapperの背景のほうを対象としてbg_layerをマスクにするようにしても、ほぼ同様の処理でいけると思います。 画像を入替えたりフェードアウトするライブラリはいろいろ作成されていますので、そういったものを利用するのもありだと思いますが、まったくそのままで使えるものはなさそうに思われますので、作成するにしろ修正するにしろ、スクリプトに関する知識が必要になることでしょう。 （サンプルなので、ごく簡単にしてあります。） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <style type="text/css"> #wrapper { width: 500px; height:500px; position:relative; } .content { padding:30px; position:absolute; } .bg_layer { width:100%; height:100%; background-image:url(A.jpg); } </style> <script type="text/javascript"> <!-- $(function(){ $("#buttons input").click(function(){ var val = this.value, layer = $("#wrapper .bg_layer:not(:animated)"); layer.fadeOut(800, function(){ layer.css("backgroundImage", "url("+val+")").fadeIn(800); }); }); }); //--> </script> </head> <body> <div id="wrapper"> <div class="content"> <p> コンテンツのテスト文字列 </p> <p> これは<a href="#hoge">テストリンク</a>です。 </p> </div> <div class="bg_layer"> </div> </div> <div id="buttons" style="margin-top:20px;"> <input type="button" value="B.jpg"> <input type="button" value="C.jpg"> </div> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
背景画像の透明度を直接変更するのは難しいです。 その代わりの方法として、その背景を持つ要素（divなど）かあるいは画像要素（img）を擬似背景としてレイヤー的に表示しておき、その要素の透明度を操作することにしてあげれば、見掛け上は同様のことができると思われます。 逆の発想で、背景の直前にマスクとなるレイヤーを置いておいて、マスクの透明度を下げることで、背景がフェードアウトしているように見せることも可能かと思います。 どちらに画像が表示されているかは違うものの、両方とも処理方法的には似たようなものになるでしょう。 （後者の方が、ご質問の言葉通りに近いのかも…） ＞変わるときにフェードイン・アウトエフェクトが必要 (jQuery） jqueryを使うのならフェードイン・アウトも比較的簡単です。 ・フェードイン 対象要素.fadeIn(); http://api.jquery.com/fadeIn/ ・フェードアウト 対象要素.fadeOut(); http://api.jquery.com/fadeOut/ など。
補足
ご返答ありがとうございます！ ご指摘のとおり、背景はdiv要素のものでも構いません 諸事情により img はあまり使いたくないので background に直接働きかけるものでしたら嬉しいです リンクもありがとうございました 大変恐縮ですが、javascript や jQuery は素人なので 必要事項が全て含まれているチュートリアルやサンプルサイトをご存知でしたら 是非教えて頂けないでしょうか？ いただいたサイトのように英語でもOKなのでぜひ・・ よろしくお願いします m(_"_)m ご返答ありがとうございました
お礼
再度のご返答ありがとうございます いただいた上記のサンプルがまさに求めていたコードそのものです！！ 一から用意していただいた様で、大変恐縮しております＞＜ 自分のソースに実装してみたところ完璧に動きました 説明もわかり易くとても助かりました fujillin さんのようにいつかこれが簡単と言えるぐらいのレベルになれるように JS をもっとがんばりたいと思います 本っっ当にありがとうございました！＼(*´▽｀)o゜★