background をフェードしながら変える方法

解決済

質問者：suteadd_1
質問日時：2011/02/23 13:27
回答数：2件

ボタン対応での background をフェードしながら変える方法を知りたいです

必要事項はこちら：

- ボタンは同ページ内に複数（button1, button2 & button3)
- それらのボタンを押すと background が変わる　(button1 を押すと background1, button2　を押すと background2 に背景が変わる）
- 変わるときにフェードイン・アウトエフェクトが必要 (jQuery）

どなたかご存知でしたら是非教えてください！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/02/23 19:26

#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">

</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 さんのようにいつかこれが簡単と言えるぐらいのレベルになれるように
JS をもっとがんばりたいと思います

本っっ当にありがとうございました！＼(*´▽｀)o゜★

通報する

お礼日時：2011/02/26 15:01

No.1

回答者： fujillin
回答日時：2011/02/23 14:42

背景画像の透明度を直接変更するのは難しいです。

その代わりの方法として、その背景を持つ要素（divなど）かあるいは画像要素（img）を擬似背景としてレイヤー的に表示しておき、その要素の透明度を操作することにしてあげれば、見掛け上は同様のことができると思われます。

逆の発想で、背景の直前にマスクとなるレイヤーを置いておいて、マスクの透明度を下げることで、背景がフェードアウトしているように見せることも可能かと思います。
どちらに画像が表示されているかは違うものの、両方とも処理方法的には似たようなものになるでしょう。
（後者の方が、ご質問の言葉通りに近いのかも…）

＞変わるときにフェードイン・アウトエフェクトが必要 (jQuery）
jqueryを使うのならフェードイン・アウトも比較的簡単です。

・フェードイン
　　対象要素.fadeIn();
　　http://api.jquery.com/fadeIn/

・フェードアウト
　　対象要素.fadeOut();
　　http://api.jquery.com/fadeOut/
など。

この回答への補足

ご返答ありがとうございます！

ご指摘のとおり、背景はdiv要素のものでも構いません
諸事情により img はあまり使いたくないので background に直接働きかけるものでしたら嬉しいです

リンクもありがとうございました
大変恐縮ですが、javascript　や jQuery は素人なので
必要事項が全て含まれているチュートリアルやサンプルサイトをご存知でしたら
是非教えて頂けないでしょうか？
いただいたサイトのように英語でもOKなのでぜひ・・
よろしくお願いします　m(_"_)m

ご返答ありがとうございました

補足日時：2011/02/23 15:14

通報する