THE HAM MEDIA BLOG

昨日のプラグインの記述方法を利用して、
自分がよく使う機能をプラグイン化してみた。

今回のは、以前にも紹介した、透明度を利用したロールオーバー。
時々利用するのでプラグインの記述方法で書き直してみた。

透明度を利用するロールオーバー

作ったプラグインのデフォルトの状態は、
以前に紹介したロールオーバーの逆、
ロールオーバー時に透明になっていき、
マウスが離れたときは、もとに戻る仕様にしています。

■JavaScript

(function($) {
  $(function() {
    $.hamFunction.opacityRollOver({
      /*適応させる部分の変更*/
      fnClass:'.over',
      /*デフォルトの透明度指定*/
      opacityDef:1.0,
      /*フェードの時間指定*/
      fadeTime:200,
      /*マウスオーバー時の透明度の指定*/
      opacityOn:0.6,
      /*マウスアウト時の最初の透明度の指定*/
      opacityOff:1.0
    });
  });

  $.hamFunction = {
    opacityRollOver: function(options){
      var c = $.extend(options);
      $(c.fnClass).each(function(){
        $(this)).css('opacity',c.opacityDef)
          .hover(function(){
            $(this).fadeTo(c.fadeTime,c.opacityOn);
          },
          function(){
            $(this).fadeTo(c.fadeTime,c.opacityOff);
          }
        )
      });
    }
  };
})(jQuery);

◆使い方

jQueryを読み込んだ後、上記のスクリプトを読み込む。
そして適応させたい部分のclassにoverを指定する。
それだけで適応される仕組みになっている。
o画像でもテキストでもどちらでも適応される。

スクリプトは自分でカスタマイズすることも可能。
：(コロン)の右側を変更することで適応される。
◇fnClass:'.over',　適応させる部分の指定。例：'.roll'
◇opacityDef:1.0,　最初の透明度。1.0は透明にならない。0が透明。
◇fadeTime:200,　変化完了までの時間。１秒は1000
◇opacityOn:0.6,　ロールオーバー時の透明度
◇opacityOff:1.0　マウスアウト時の透明度

■プレビュー

それぞれマウスを乗せると変化する。

ロールオーバー画像がないけど
ロールオーバーさせたいときに便利なこの透明度が利用できる。
CSSでもできるけど、ゆっくり変化させたいときなど、
JavaScriptを使ったほうが動きがあって綺麗なので、
僕としてはこれをおすすめする。

今回はマウスオーバー時に透明度が出るようにしてみたけど、
カスタマイズの部分で逆にすることも可能なので、
自分の好きなところで、自分の好きな透明度を指定して使って欲しい。

ちなみに、バグとかみていないので、あれば教えてほしいです。