ホーム > ブログ [果報は寝て待て] > jQuery フェードエフェクト画像ロールオーバー

ブログ [果報は寝て待て]|Blog

jQuery フェードエフェクト画像ロールオーバー

2012年2月27日 19:14

こんにちは。 最近はjQueryでWebサイト上のほとんどの動きが実現できるようになってきましたね。 そこでナビゲーションとかでよく使う画像ロールオーバーにフェード機能をと考えていろいろ検索してみました。

個人的にCSSで-9999とかってやるのが嫌なので(あちこちで可否が言われてますけど、グレーなのには間違いないと思ってるので…)、オーバー時とアウト時の画像を2枚用意するバージョンです。

jQueryで簡単実装!フェードエフェクト付き画像ロールオーバー』 を参考にさせていただき、画像ボタン(inputタグ)にも対応できるように改造してみました。

以下、コード。

/**
* jquery.faderollover.js
*
* @author    shape DESIGN <info@shape-design.jp>
* @link      http://shape-design.jp/
*/
 
(function(){
  $.faderollover = function( option ){
    var settings = $.extend({
      target: 'img,input',
      out_suffix: '_off',
      over_suffix: '_on',
      in_duration: 300,
      out_duration: 200
    }, option );
   
    var objTarget = $(settings.target);
    objTarget.each(function(){
     
      if( $(this).attr('src') != undefined ){
       
        if( $(this).attr('src').match( new RegExp( '.+'+settings.out_suffix+'\..+$' ) ) ){
         
          this.objOverElm = $(this).clone();
         
          this.objOverElm.attr('src', function(){
            return $(this).attr('src').replace( settings.out_suffix, settings.over_suffix );
          });
         
          this.objOverElm.css({ position: 'absolute', opacity: 0 });
          $(this).before( this.objOverElm );
         
          $(this.objOverElm).hover(function(){
            $(this).stop().animate({ opacity: 1 }, { duration: settings.in_duration, queue: false });
          },
          function(){
            $(this).stop().animate({ opacity: 0 }, { duration: settings.out_duration, queue: false });
          });
        }
      }
    });
  }
})(jQuery);

使うときはこんな感じです。

$(function(){
  $.faderollover({in_duration: 400,out_duration: 400});
});

■Options
target: 要素名(imgとかinputとか)
out_suffix: アウト時の画像ファイル名のサフィックス
over_suffix: オーバー時の画像ファイル名のサフィックス
in_duration: オーバー時のフェードスピード
out_duration: アウト時のフェードスピード

Firefoxでしか試していませんので、使っていただくのはご自由ですが、自己責任でお願いいたします。

shape DESIGN - シェイプデザイン, 徳島県徳島市名東町, tel/fax 088-635-5859, 営業時間 平日10:00〜18:00

まずはお気軽にお問い合わせください
お問い合わせ・お見積り・ご相談はこちら
お気軽にご相談ください

徳島県徳島市名東町
tel/fax 088-635-5859
営業時間 平日 10:00〜18:00

※打ち合わせ等で不在の場合は、お電話でのお問い合わせに対応できない場合がありますので、ご了承ください。

フォームからのお問い合わせ

徳島・香川・愛媛・高知および大阪・京都を中心にご依頼を承ります。その他の地域でも、メール・お電話・FAX・Skype等での作業が可能であれば柔軟に対応いたします。

  • Become our fan on Facebook, facebook.com/shape.design