徳島・香川・愛媛・高知および大阪・京都のホームページ制作(WEBサイト制作)・PHPシステム開発は shape DESIGN(シェイプデザイン)

/**
* 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});
});