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

人様のソースコードを読み解くシリーズです。ものすごい忙しいというわけではないのですが、PCを開くのがちょっと億劫になっています…。

今回は、前回の続きです。「3.マウスオーバーした画像に何かが追尾するナビゲーション」「4.拡大するナビゲーション」「5.横からぐいんって伸びるナビゲーション」を見てみます。

3.マウスオーバーした画像に何かが追尾するナビゲーション

Java Script

$(function() {
   $('#nav3 li').hover(function(){
      //画像の位置を取得
      var left = $(this).position().left;
      $('#btn-bd').stop().animate({
         marginLeft : parseInt($(this).css('margin-left'))+ left+1 +'px'
      },'fast');
   });
});

メニュー画像とは別に、追尾する画像(#btn-bd)を用意しておいて、その画像を移動させています。

親要素($(‘#nav3 li’))からの位置を取得するには、『.position()』を使えばよいのですね。不思議に思っているのですが、なんで、『.position(left)』という書き方でなくて、『.position().left』という書き方をするんでしょうか。こう思ってしまうあたりがJavaScript初心者だからでしょうか。

あと、アニメーションのところで『parseInt』を使用していますが、これは初めて知りました。

『parseInt』はCSSプロパティの値を取得できるものらしいです。普通、CSSプロパティの値を取得するには、『$(this).css(‘margin-left’)』という書き方をするのですが、このふたつの違いは、『parseInt』は単位なしで取得するのに対して、『$(this).css(‘margin-left’)』は単位あり(px)で取得するようです。

アニメーションのところで、画像位置の他に、CSSのmargin-leftの値やら1pxを足しているのは、CSSのほうで余白を設定しているために複雑になっていますが、基本、画像位置だけでよいかと思います。

4.拡大するナビゲーション

Java Script

$(function() {
   $('#nav4 li img')
   .hover(
      function(){
         $(this).stop().animate({
            'width':'130px',
            'height':'130px',
            'marginTop':'-32px'
         },'fast');
      },
      function () {
         $(this).stop().animate({
            'width':'70px',
            'height':'70px',
            'marginTop':'0px'
         },'fast');
      }
   );
});

これは非常に単純で、widthとheightの大きさを変化させているだけですね。

5.横からぐいんって伸びるナビゲーション

Java Script

$(function() {
   $('#nav5 a')
   //ボタンを-200で配置
   .each(function(){
      $(this).css('margin-left', '-200px')
   })
   .hover(
      function(){
         $(this).stop().animate({
            'marginLeft':'0px'
         },'fast');
      },
      function () {
         $(this).stop().animate({
            'marginLeft':'-200px'
         },'slow');
      }
   );
});

これも、実は単純で画像を左右に動かしているだけですね。

どれも単純なソースコードですが、アイデア次第でユニークなメニューが作れますね。勉強になりました!