カーソルを合わせると画像がふわふわと上下に動きます。どのようにして実現

質問

カーソルを合わせると画像がふわふわと上下に動きます。どのようにして実現しているのでしょうか？

Pioneerのホームページ内に、リンクの中のpng画像のみがカーソルを合わせるとふわふわと上下に動く部分があり、不思議に思ってfirebugで見てみたところ、動いているときは[style="top: 108px;"]←この数値が勝手に変動しています。
（http://pioneer.jp/ipod_sys/index.html　←※FLASHの下の３つスピーカーが並んでいる部分です。）

簡単なコーディングができる程度のCSSの知識はあるのですが、なぜこのような動きをしているのか全くわかりません。
参考URLでも構いませんので、教えていただけるとうれしいです。
よろしくお願い致します。

回答No.2

yyr446 · ベストアンサー

そのページでは、javascriptで、スタイル属性を変更して実現してます。
firebugお使いならば、<script>の中身も見れます。

ここでは、jQueryというjavascriptのライブラリーを使って、
スタイルの変更や、視覚効果を簡便に実行しています。

<script type="text/javascript" src="common/js/jquery.js"></script>
がライブラリーです。（これはjQueryのサイトからダウンロード出来ます。）

作者のコーディングされた部分は
<script type="text/javascript" src="common/js/common.js"></script>
です。

マウスオーバーでふわふわを実現させてる部分は、この中の

　　$("#idxNavi li a").hover(
　　 function () {
　　　　var index = $("#idxNavi li a").index($(this));
　　　　if (!$.browser.msie || $.browser.version >= 7)
　　　　{
　　　　　$(this).next().animate(
　　　　　　{top:'95px'},
　　　　　　{duration: 280, easing: "linear",
　　　　　　complete: function(){}
　　　　　});
　　　　　$(this).next().next().fadeOut("slow");
　　　　　$(this).next().next().next().fadeIn("slow");
　　　　}
　　　　$(this).children(".btnOver").show();
　　　　$(this).children(".btnDef").hide();
　　 },
　　 function () {
　　　　var index = $("#idxNavi li a").index($(this));
　　　　if (!$.browser.msie || $.browser.version >= 7)
　　　　{
　　　　　$(this).next().animate(
　　　　　　{top:'108px'},
　　　　　　{duration: "slow", easing: "linear",
　　　　　　complete: function(){ }
　　　　　});
　　　　　$(this).next().next().next().fadeOut(450);
　　　　　$(this).next().next().fadeIn(450);
　　　　}
　　　　$(this).children(".btnOver").hide();
　　　　$(this).children(".btnDef").show();
　　 }
　　);

部分です。CSSおわかりなら、セレクター指定が解るので、なんとなくやってる
事が推測できませんか、
fadeOut、fadeIn、hide()、show()とかduration: 280, easing: "linear"
みたいな見慣れない属性は、jQuryが提供している機能です。

参考（jQuery）
http://semooh.jp/jquery/

お礼

プログラムの内容まで書いてくださってありがとうございます。
jQueryというのはごくごく簡単なものを一度だけ使った事はありましたが、このような事もできるのですね！
ホームページ上で動くもの＝FlashかGIFアニメ！と決め付けていました。。

jQueryはこれから勉強していきたいと思っているので、参考のURLも活用さしてもらいます♪
また、firebugで<script>が見れることも知りませんでした。
大変勉強になります！ありがとうございますm(_ _)m

回答No.1

ralf124c

以下、製品と大きい影と小さい影を用意して

http://pioneer.jp/ipod_sys/images/idxNAS50Pic.png
http://pioneer.jp/ipod_sys/images/idxNAS50Shade.gif
http://pioneer.jp/ipod_sys/images/idxNAS50Shade_over.gif

上記画像+1(周りの文字画像)を重ねて
マウスカーソルが指定されたエリア内(周りの文字画像内)に入ったら
JavaScriptで製品画像をスタイルシート要素のTopマージンを変化させて上に少しずつずらし(Topのマージンを95から108の間で増減)
JavaScriptで大きい影をフェードアウトしながら小さい影をフェードイン
マウスカーソルが指定されたエリア外に出たら
その逆

jQueryを使って上記処理を「common.js」に組み込んでいます

jQuery　フェードイン　フェードアウト で検索してください。

お礼

ご回答ありがとうございます。

それぞれ製品と影の画像が使われているところまでは理解できていたのですが、jQueryを使うと画像のフェードイン・フェードアウト・動かすことが出来るのですね～！

勉強になりました！ありがとうございますm(_ _)m