[ 勉強 ] マウスオーバーでアニメーションするボタン

人様のソースコードを読み解くシリーズです。今回は、メニューのマウスオーバー時のアニメーションです。

ここでは、5種類ありますが、最初の「1.フェードイン・フェードアウトで切り替わるナビゲーション」、「2.くるっと切り替わるナビゲーション」を見てみます。

1.フェードイン・フェードアウトで切り替わるナビゲーション

Java Script

$(function() {
   var num = 1;
   $('#nav1 li')
   //マウスオーバー画像を配置
   .each(function(){
      $(this).css('background', 'url(img/nav0'+num+'.gif) no-repeat 0px -29px')
      num++;
   })
   .find('img').hover(
      function(){
         $(this).stop().animate({'opacity' : '0'}, 500);
      },
      function(){
         $(this).stop().animate({'opacity' : '1'}, 1000);
      }
   );
});

ここでは、メニュー画像に連番をつけており、『.each(function(){});』と記述することで各メニューの画像の切り替えを行っていますね。

また、『.find()』というのは初めて知りました。

特定の要素内で検索をかけるので処理が早くなりますね。

6行目のところは、マウスオーバー用の画像(メニュー画像の下部分)を、HTMLファイルで設定したメニュー画像(メニュー画像の上部分)の下に、CSSのbackgroundを利用して設置しています。

そして、『.hover();』を使って、マウスオーバーしたときにHTMLファイルのメニュー画像を透過させて、下に配置していたマウスオーバー用の画像を表示させます。

逆に、マウスアウトしたときは、HTMLファイルのメニュー画像を透過させないようにしています。

あと、アニメーションの基本ですが、『$(this).stop().animate();』というように.stop()を入れておかないと、アニメーションが延々と実行されてしまい、きれいなアニメーションにならない場合があるので注意です。

アニメーションを中止する仕方として、『$(this).not(‘:animated’)』もあるのですが、今回のスクリプトの場合はうまくいきません。

『.stop()』と『.not(‘:animated’)』の処理の違いをよく理解する必要がありますね。

『.stop()』はアニメーション中に、再度アニメーションが実行されたら即座に処理を中止して、新しいほうのアニメーションを実行する。

『.not(‘:animated’)』はアニメーションをしていない時に実行する。

今回の場合は、メニューのフェードイン・フェードアウトをマウスの動きに合わせないといけないので、『.stop()』のほうを選択しなければなりません。

また、今回、フェードイン・フェードアウトには「.animate({‘opacity’ : ’0′}, 500)』を利用していますが、『.fadeTo()』を利用しても良いかと思います。

Java Script

.find('img').hover(
   $(this).stop().fadeTo(500, 0);
   },
   function(){
      $(this).stop().fadeTo(1000, 1);
   }
);

2.くるっと切り替わるナビゲーション

Java Script

$(function() {
   $('#nav2 li img')
   .hover(
      function(){
         $(this).stop().animate({'marginTop':'-29px'},'fast');
      },
      function () {
         $(this).stop().animate({'marginTop':'0px'},'fast');
      }
   );
});

メニューが回転しているように見せるには、単純にメニュー画像を縦方向にスライドさせて表現しています。なかなかのアイデアですね。

同様の考えで、画像を左右に並べれば、横からスライドするメニューもできそうですね。