画像をクロスフェードで切り替えるライブラリ

このライブラリは非常に素晴らしいです。

via
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社

しかし、僕のファイル命名規則とかと、ちょっとスタイルが違うので自分用にカスタマイズしました。

• • クロスフェードするimg画像にクラス指定して必要な画像のみ処理する
  • offClass、onClassを自分用に_df、_ovに変更
  • imgがaタグの中になくても動作可能に
  • その他、設定は冒頭部で行う

ソースは未来の僕のコピペ用です。

/*
======== table of content. =================================

Description: fadein/out button image when mouse overed.
Update:  2010/07/1-
Author:  Japan Electronic Industrial Arts Co.Ltd.
         http://www.jeia.co.jp/
License: licensed under the MIT (MIT-LICENSE.txt) license.
Using:   using jQuery
         http://jquery.com/
         using DD_belatedPNG for IE6-8
         http://www.dillerdesign.com/experiment/DD_belatedPNG/

Edit: purazumakoi
============================================================
*/

new function() {
	
	var fadeInTime = 300;	// msec
	var fadeOutTime = 300;	// msec
	var offClass = 'df';
	var onClass = 'ov';
	var imgClass = 'swpImgFade';
	var fadeReg = new RegExp('.*_' + offClass + '\.[^.]+');
	var imgPatern = new RegExp('.*\.png$');
	
	if ( typeof jQuery == 'undefined' ) {
		return;
	}
	
	jQuery(document).ready( function() {
		init();
	});
	
	/**
	 * initialize
	 */
	function init() {
		
		jQuery( 'img.' + imgClass ).each( function() {
			
			var src = jQuery(this).attr( 'src' );
			var fadePatern = new RegExp( fadeReg );
			var pngPatern = new RegExp( imgPatern );
			var onImage;
			
			if ( src.match( fadePatern ) ) {
				onImage = jQuery(this).clone();
				onImage.
					attr( 'src', src.replace( '_' + offClass + '.', '_' + onClass + '.' ) ).
					addClass( onClass ).
					fadeTo( 0, 0 ).
					css({
						'position': 'absolute',
						'left': '0px',
						'top': '0px'
					});
				
				jQuery(this).
					addClass( offClass ).
					css({
						'position': 'absolute',
						'left': '0px',
						'top': '0px'
					}).
					parent().
						append( onImage ).
						mouseover( onMouseOver ).
						mouseout( onMouseOut ).
						css({
							'display': 'block',
							'position': 'relative'
						}).
						width( jQuery(this).width() ).
						height( jQuery(this).height() );
				
				if ( typeof( DD_belatedPNG ) != 'undefined' ) {
					if ( src.match( pngPatern ) ) {
						DD_belatedPNG.fixPng( this );
						DD_belatedPNG.fixPng( onImage.get(0) );
					}
				}
			}
		});
	}
	
	
	/**
	 * mouseover event( fadein )
	 */
	function onMouseOver( e ) {
		
		var src = jQuery(this).children( 'img.' + offClass ).attr( 'src' );
		var pngPatern = new RegExp( imgPatern );
		
		jQuery(this).unbind( 'mouseover', onMouseOver );
		
		if ( src.match( pngPatern ) ) {
			jQuery(this).
				children( 'img.' + offClass ).
					fadeTo( fadeInTime, 0 ).
				end().
				children( 'img.' + onClass ).
					fadeTo( fadeInTime, 1, function(){
						jQuery(this).parent().mouseover( onMouseOver );
					});
		}
		else {
			jQuery(this).
				children( 'img.' + onClass ).
					fadeTo( fadeInTime, 1, function(){
						jQuery(this).parent().mouseover( onMouseOver );
					});
		}
	}
	
	/**
	 * mouseout event( fadeout )
	 */
	function onMouseOut( e ) {
		
		var src = jQuery(this).children( 'img.' + offClass ).attr( 'src' );
		var pngPatern = new RegExp( imgPatern );
		
		if ( src.match( pngPatern ) ) {
			jQuery(this).
				children( 'img.' + offClass ).
					fadeTo( fadeOutTime, 1 ).
				end().
				children( 'img.' + onClass ).
					fadeTo( fadeOutTime, 0 );
		}
		else {
			jQuery(this).
				children( 'img.' + onClass ).
					fadeTo( fadeOutTime, 0 );
		}
	}
}