in hiding.

メニューの数が多いサイトで、そのメニューすべてにロールオーバー効果を仕込もうとするとメニューの数だけロールオーバー用の画像を作成しプリロードしなければならないですよね。先日手がけたサイトではトップページだけでもメニュー含めロールオーバー部分がが30個以上あって大変でした。

マウスオーバー時に画像が変わる場合はやっぱりそれだけ用意しなければなりませんが、例えばマウスオーバー時に濃くなるという仕様であればこの方法がなかなか使えたのでメモ。

用意するものはｊQuery本体と画像一つ。スクリプトは下記のようになります。

<script type="text/javascript">
function FlashBlock() {
/*ページ読み込み時に画像の透明度を50％にする*/
$(".FlashBlock").fadeTo(100, 0.5);
/*マウスオーバー・アウト時の処理*/
$(".FlashBlock").hover(
/*マウスオーバー時　100％に*/
    function(){$(this).fadeTo(100, 1);return false;},
/*マウスアウト時　50％に*/
    function(){$(this).fadeTo(100, 0.5);return false;}
  );
}
$(FlashBlock);
</script>

 あとは画像のimgタグにclass="FlashBlock"を仕込むだけです。

fadeTo(XXX,YYY)のYYYは透明度です。XXXはフェードの時間(ミリ秒単位）です。

たとえばマウスオーバー時に1.5秒かけて30％の透明度へフェードさせる場合は下記のようになります。

<script type="text/javascript">
function FlashBlock2() {
/*マウスオーバー・アウト時の処理*/
$(".FlashBlock2").hover(
/*マウスオーバー時　1.5秒かけて30％に*/
    function(){$(this).fadeTo(1500, 0.3);return false;},
/*マウスアウト時　100％に*/
    function(){$(this).fadeTo(100, 1);return false;}
  );
}
$(FlashBlock2);
</script>