jqueryのプラグインを探しています。


以下のようなhtmlがあります。
--------------------------------------------------
<div style="background:url(bg00.jpg);" id="area01">あいうえお</div>
<a href="#">ボタン1</a>
<a href="#">ボタン2</a>
--------------------------------------------------
ボタン1にマウスオーバーすると、div#area01の背景画像がbg01.jpgに変わり
ボタン2にマウスオーバーすると、div#area01の背景画像がbg02.jpgに変わり
マウスアウトするとbg00.jpgに戻るような
jqueryのプラグイン、どこかにないでしょうか?
オプションで、切り替わる際のエフェクトが追加できれば尚うれしいです。

以上、皆さんの知恵をお貸しください!

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2012/03/24 00:45:56
  • 終了:2012/03/24 11:10:36

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4440ベストアンサー獲得回数18242012/03/24 10:57:51

ポイント300pt

jQuery の hover() と fadeIn() を使ってみました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<style>
IMG {
    height: 320px;
    position: absolute;
    left: 1em;
}
#i2, #i3 {
    display: none;
}
#area01 {
    height: 320px;
    position: relative;
    padding: 0.5em;
    margin-left: 1em;
    color: white;
}
</style>
<script>
var SPEED = 2000;
$(function() {
    $("#b1").hover(
            function() { $("#i2").fadeIn(SPEED); },
            function() { $("#i2").fadeOut(SPEED); }
        );
    $("#b2").hover(
            function() { $("#i3").fadeIn(SPEED); },
            function() { $("#i3").fadeOut(SPEED); }
        );
});
</script>

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20120219/20120219201602.jpg" id="i1">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20120108/20120108135349.jpg" id="i2">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20110726/20110726133847.jpg" id="i3">
<div id="area01">おなか空いた</div>
<p>
<a href="#" id="b1">ボタン1</a>
<a href="#" id="b2">ボタン2</a>

jsFiddle で動作確認したのが、↓です。
http://jsfiddle.net/a_kuma3/xK4uQ/

id:pxi13773

完璧です!!!
助かりました!
jqueryって面白いですね。
これを機に勉強してみようと思います。

ありがとうございました!

2012/03/24 11:10:16
id:a-kuma3

時間があったら、流し読みで構わないので、ドキュメントを読むと面白いですよ。

http://semooh.jp/jquery/
何となく、一番使ってる。でも、載ってない API も多い。

http://stacktrace.jp/jquery/api/
一番目のよりも、網羅性は高い。CORE だけじゃなくて、UI のドキュメントもある。
どっちも、ちょっと古いのが難。

http://api.jquery.com/
本家。当然ながら、一番信頼度がおけるけど、英語。
でも、サンプルコードを読むなら、英語でもあまり関係ない。

2012/03/24 11:32:58
  • id:Cherenkov
    >切り替わる際のエフェクト
    どんなことをしたいのか具体的に。jqueryプラグインである必要もなさそうです。
  • id:pxi13773
    そうなんですか!
    エフェクトは、背景画像がパッと切り替わるのではなく、やんわりと切り替わる感じ(説明が難しい…)がいいなあと思っています。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません